草庐IT

#yyds干货盘点#vue.config.js 的完整配置

尼羲 2023-03-28 原文
今天分享一下，我们项目当中的一些​​webpack​​配置，希望能给大家有所启发；只要配置多了，你就会发现其实所有的配置的都是相似的，尤其像插件的配置，都是十分相似的。

我们现在开始进入今天的主题啦~~

1 介绍

之前，我有提到过，当然大家肯定也都知道，Vue3.0不在有​​webpack.config.js​​的配置；但是不可避免,在项目开发中我们肯定会存在一些特殊的需求需要调整​​webpack​​, 这个时候，在Vue3.0的项目当中，我们就需要在根目录创建​​vue.config.js​​去完成​​webpack​​的一些特殊配置,默认它会被 ​​@vue/cli-service​​ 自动加载。

此刻，你需要创建​​vue.config.js​​文件。


查看默认的webpack配置

Vue CLI 官方文档：vue-cli-service 暴露了 inspect 命令用于审查解析好的 webpack 配置。那个全局的 vue 可执行程序同样提供了 inspect 命令，这个命令只是简单的把 vue-cli-service``inspect 代理到了你的项目中。
被抽象化的​​webpack​​，我们要想去理解它默认的一些配置的话是比较困难的，所以我们可以通过指令去查看。

该指令会将​​webpack​​的配置输出到​​output.js​​文件，这样方便去查看。

vue inspect > output.js

vue.config.js文件

这个文件导出了一个包含了选项的对象：

module.exports = {
// 选项...
}
接下来，详细介绍一些选项及配置：

​

2 基本配置

module.exports = {
productionSourceMap: false,
publicPath: './',
outputDir: 'dist',
assetsDir: 'assets',
devServer: {
port: 8090,
host: '0.0.0.0',
https: false,
open: true
},
// 其他配置
...
  • productionSourceMap：生产环境是否要生成 sourceMap
  • publicPath：部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致
  • 可以通过三元运算去配置​​dev​​和​​prod​​环境,​​publicPath: process.env.NODE_ENV === 'production' ? '/prod/' : './'​​
  • outputDir: build 时输出的文件目录
  • assetsDir: 放置静态文件夹目录
  • devServer: dev环境下，webpack-dev-server 相关配置
  • port: 开发运行时的端口
  • host: 开发运行时域名，设置成​​'0.0.0.0'​​,在同一个局域网下，如果你的项目在运行，同时可以通过你的​​http://ip:port/...访问你的项目​​
  • https: 是否启用​​https​​
  • open:​​npm run serve​​ 时是否直接打开浏览器

3 插件及规则的配置

在​​vue.config.js​​如果要​​新增/修改​​ ​​webpack​​ 的 ​​plugins​​ 或者 ​​rules​​ , 有2种方式。

​​configureWebpack​​ 方式

configureWebpack 是相对比较简单的一种方式

  • 它可以是一个​​对象​​：和​​webpack​​ 本身配置方式是一致，该对象将会被​​webpack-merge​​ 合并入最终的​​webpack​​ 配置
  • 它也可以是一个​​函数​​：直接在函数内部进行修改配置
configureWebpack: {
rules:[],
plugins: []
}
configureWebpack: (config) => {
// 例如，通过判断运行环境，设置mode
config.mode = 'production'
}

​​chainWebpack​​ 方式

chainWebpack 链式操作 (高级)，接下来所有的配置我都会在该选项中进行配置

4 一个完整的vue.config.js

```
配置
//导入node下面的相关包
const merge = require('webpack-merge') // base64
const path = require('path');
const webpack=require('webpack')
//安装postcss-px2rem
const px2rem = require('postcss-px2rem')
//安装postcss
const postcss = require('postcss')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
// 基本路径
baseUrl: '/',
// 输出文件目录
outputDir: 'dist',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// use the full build with in-browser compiler?
// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
compiler: false,
// webpack配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => {},
configureWebpack: () => {},
// vue-loader 配置项
// https://vue-loader.vuejs.org/en/options.html
vueLoader: {},
// 生产环境是否生成 sourceMap 文件
productionSourceMap: true,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
// 启用 CSS modules for all css / pre-processor files.
modules: false
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
// 是否启用dll
// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
dll: false,
// PWA 插件相关配置
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// webpack-dev-server 相关配置
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: true,
proxy: null, // 设置代理
before: app => {},
proxy: {
//第三方跨域代码
}
},
// 第三方插件配置
pluginOptions: {
// ...
}
}

module.exports = {
lintOnSave: true,
chainWebpack: (config)=>{
//在vue cli3中配置webpack目录别名alias的方式
config.resolve.alias
.set('@$', resolve('src'))
.set('assets',resolve('src/assets'))
.set('components',resolve('src/components'))
.set('common',resolve('src/common'))
.set('api',resolve('src/base/api'))
.set('directive',resolve('src/base/directive'))
.set('filter',resolve('src/base/filter'))
.set('api',resolve('src/base/api'))
.set('iconfont',resolve('src/base/iconfont'))
.set('js',resolve('src/base/js'))
.set('css$',resolve('src/base/css'))
.set('minxins',resolve('src/base/minxins'))
//base64相关代码
config.module
.rule('images')
.test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
.use('url-loader')
.loader('url-loader')
.tap(options =>
merge(options, {
limit: 10000,
})
)
},


}
module.exports = {
//配置在移动端以[640,750]方式来处理rem的基本代码体
css: {
loaderOptions: {
postcss: {
// options here will be passed to postcss-loader
plugins: [require('postcss-px2rem')({
remUnit: 75
})]
},

}

},


}
```
盘点configcodebrpxcssgithubhtmlJavaScript前端开发yyds干货盘点

有关#yyds干货盘点#vue.config.js 的完整配置的更多相关文章

  1. ruby-on-rails - 独立 ruby​​ 脚本的配置文件 - 2

    我有一个在Linux服务器上运行的ruby​​脚本。它不使用rails或任何东西。它基本上是一个命令行ruby​​脚本，可以像这样传递参数:./ruby_script.rbarg1arg2如何将参数抽象到配置文件(例如yaml文件或其他文件)中？您能否举例说明如何做到这一点？提前谢谢你。 最佳答案 首先，您可以运行一个写入YAML配置文件的独立脚本:require"yaml"File.write("path_to_yaml_file",[arg1,arg2].to_yaml)然后，在您的应用中阅读它:require"yaml"arg

  2. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？ 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  3. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项？ - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  4. Vscode+Cmake配置并运行opencv环境(Windows和Ubuntu大同小异) - 2

    之前在培训新生的时候，windows环境下配置opencv环境一直教的都是网上主流的vsstudio配置属性表，但是这个似乎对新生来说难度略高(虽然个人觉得完全是他们自己的问题)，加之暑假之后对cmake实在是爱不释手，且这样配置确实十分简单(其实都不需要配置)，故斗胆妄言vscode下配置CV之法。其实极为简单，图比较多所以很长。如果你看此文还配不好，你应该思考一下是不是自己的问题。闲话少说，直接开始。0.CMkae简介有的人到大二了都不知道cmake是什么，我不说是谁。CMake是一个开源免费并且跨平台的构建工具，可以用简单的语句来描述所有平台的编译过程。它能够根据当前所在平台输出对应的m

  5. 神州数码无线产品（AC+AP）配置 - 2

    注意：本文主要掌握DCN自研无线产品的基本配置方法和注意事项，能够进行一般的项目实施、调试与运维AP基本配置命令AP登录用户名和密码均为：adminAP默认IP地址为：192.168.1.10AP默认情况下DHCP开启AP静态地址配置：setmanagementstatic-ip192.168.10.1AP开启/关闭DHCP功能：setmanagementdhcp-statusup/downAP设置默认网关：setstatic-ip-routegeteway192.168.10.254查看AP基本信息：getsystemgetmanagementgetmanaged-apgetrouteAP配

  6. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  7. hadoop安装之保姆级教程（二）之YARN的配置 - 2

    1.1.1 YARN的介绍 为克服Hadoop1.0中HDFS和MapReduce存在的各种问题⽽提出的，针对Hadoop1.0中的MapReduce在扩展性和多框架⽀持⽅⾯的不⾜，提出了全新的资源管理框架YARN. ApacheYARN（YetanotherResourceNegotiator的缩写）是Hadoop集群的资源管理系统，负责为计算程序提供服务器计算资源，相当于⼀个分布式的操作系统平台，⽽MapReduce等计算程序则相当于运⾏于操作系统之上的应⽤程序。 YARN被引⼊Hadoop2,最初是为了改善MapReduce的实现，但是因为具有⾜够的通⽤性，同样可以⽀持其他的分布式计算模

  8. Ruby 默认将 IRB 配置为 Pretty_Inspect - 2

    我是ruby​​的新手，正在配置IRB。我喜欢pretty-print(需要'pp')，但总是输入pp来漂亮地打印它似乎很麻烦。我想做的是默认情况下让它漂亮地打印出来，所以如果我有一个var，比如说，'myvar'，然后键入myvar，它会自动调用pretty_inspect而不是常规检查。我从哪里开始？理想情况下，我将能够向我的.irbrc文件添加一个自动调用的方法。有什么想法吗？谢谢! 最佳答案 irb中默认pretty-print对象正是hirb被迫去做。Theseposts解释hirb如何将几乎所有内容转换为ascii表。虽

  9. ruby - 是否可以将 IRB 提示配置为动态更改？ - 2

    我想在IRB中浏览文件系统并让提示更改以反射(reflect)当前工作目录，但我不知道如何在每个命令后进行提示更新。最终，我想在日常工作中更多地使用IRB，让bash溜走。我在我的.irbrc中试过这个:require'fileutils'includeFileUtilsIRB.conf[:PROMPT][:CUSTOM]={:PROMPT_N=>"\e[1m:\e[m",:PROMPT_I=>"\e[1m#{pwd}>\e[m",:PROMPT_S=>"FOO",:PROMPT_C=>"\e[1m#{pwd}>\e[m",:RETURN=>""}IRB.conf[:PROMPT_MO

  10. ruby - 如何配置 Ruby Mechanize 代理以通过 Charles Web 代理工作？ - 2

    我正在使用Ruby/Mechanize编写一个“自动填写表格”应用程序。它几乎可以工作。我可以使用精彩CharlesWeb代理以查看服务器和我的Firefox浏览器之间的交换。现在我想使用Charles查看服务器和我的应用程序之间的交换。Charles在端口8888上代理。假设服务器位于https://my.host.com。.一件不起作用的事情是:@agent||=Mechanize.newdo|agent|agent.set_proxy("my.host.com",8888)end这会导致Net::HTTP::Persistent::Error:...lib/net/http/pe

随机推荐