vue.config.js的详解
·
目录
获取Vue CLI项目的 webpack 配置信息
使用 vue-cli-service inspect 来查看一个Vue CLI项目的 webpack 配置信息。
运行命令，将输出导入到 js 文件
- 开发环境：
npx vue-cli-service inspect --mode development >> webpack.config.development.js- 生产环境：
npx vue-cli-service inspect --mode production >> webpack.config.production.js- 在产生的 js 文件开头，添加：
module.exports =，然后格式化即可查看。
一. 基础配置示例
// cnpm install compression-webpack-plugin@6.1.1 -D gzip压缩插件，需要引入
// cnpm i image-webpack-loader@8.1.0 --save-dev 图片压缩，不需要引入
// npm i webpack-bundle-analyzer@4.7.0 --save-dev 打包分析插件
// npm i speed-measure-webpack-plugin -D 打包时间
// npm i hard-source-webpack-plugin -D 构建时进行缓存
const CompressionWebpackPlugin = require('compression-webpack-plugin') // 开启gzip压缩， 按需引用
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin // 引入打包分析插件
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
const webpack = require('webpack')
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i // 开启gzip压缩， 按需写入
const isProduction = process.env.NODE_ENV === 'production'
const BASE_URL = process.env.NODE_ENV === 'production' ? './' : './'
const path = require('path')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
// 其他配置可以走默认
publicPath: BASE_URL, // 基本路径
outputDir: 'dist', // 输出文件目录
lintOnSave: process.env.NODE_ENV !== 'production', // 生产环境不进行eslint校验
productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
// assetsDir: '', // 静态文件要不要放在一个文件夹里，默认值是‘’，有需要可以自己改
// webpack配置
chainWebpack: config => {
// 移除 preload(预载) 插件
config.plugins.delete('preload')
// 移除 prefetch(预取) 插件
config.plugins.delete('prefetch')
if (isProduction) {
// 生产环境下---压缩图片
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({ bypassOnDebug: true })
.end()
}
},
configureWebpack: (config) => {
// 生产和开发环境都有的配置
config.devtool = 'source-map'
// 开启缓存
config.plugins.push(
new HardSourceWebpackPlugin()
)
// 配置别名
Object.assign(config.resolve, {
alias: {
'@': path.resolve(__dirname, './src')
}
})
// 生产环境下的配置
if (isProduction) {
// 添加webpack插件
config.plugins.push(
new SpeedMeasurePlugin(), // 构建时间
new BundleAnalyzerPlugin() // 构建体积
// 一些依赖，咱们也许只是用到了一部分，不必所有解析，好比moment中的语言包，咱们通常只用中文包就够了，因此能够这样配置：
// new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/)
)
// 打包文件大小配置
config.performance = {
maxEntrypointSize: 10000000, // 根据入口起点的最大体积，控制 webpack 何时生成性能提示。
maxAssetSize: 30000000 // 根据单个资源体积(单位: bytes)，控制 webpack 何时生成性能提示。
}
// 生产环境 优化打包chunk-vendors.js文件体积过大。
Object.assign(config.optimization, {
runtimeChunk: 'single',
splitChunks: { // 默认的splitChunks会全部清空
chunks: 'all',
minSize: 20 * 1024 // chunks超过20000bit（20kb）将被单独打包
// cacheGroups: { // 对node_modules下的库单独打包。暂时先不开启，可以看看打包体积后决定
// vendor: { // 默认的vendor.js
// test: /[\\/]node_modules[\\/]/, // 匹配映射文件
// name (module) {
// // get the name. E.g. node_modules/packageName/not/this/part.js
// // or node_modules/packageName
// const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
// // npm package names are URL-safe, but some servers don't like @ symbols
// return `npm.${packageName.replace('@', '')}`
// }
// }
// }
}
})
// 清除console.log
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
// 开启 gzip 压缩 文件
// 注：生成的压缩文件以.gz为后缀，一般浏览器都已支持.gz的资源文件，在http请求的Request Headers 中能看到 Accept-Encoding:gzip。要使服务器返回.gz文件，还需要对服务器进行配置，根据Request Headers的Accept-Encoding标签进行鉴别，如果支持gzip就返回.gz文件。
// 服务器配置参考：https://blog.csdn.net/a1983029606/article/details/115690820
config.plugins.push(
new CompressionWebpackPlugin({
filename: '[path][base].gz',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 10240, // 只有大小大于该值的资源会被处理
minRatio: 0.8 // 只有压缩率小于这个值的资源才会被处理
})
)
}
},
// css相关配置
css: {
loaderOptions: {
// 启用less中javascript支持
less: {
// less-lorder配置项 详见 https://www.webpackjs.com/loaders/less-loader/#lessoptions
javascriptEnabled: true
}
}
},
// webpack-dev-server 相关配置
devServer: {
host: '0.0.0.0', // ip 本地
port: 2023, // 设置端口号
// inline: true, // 用于设置代码保存时是否自动刷新页面。默认：true
// open: false, //配置自动启动浏览器，默认：false
// hot: true, // 用于设置代码保存时是否进行热更新（局部刷新，不刷新整个页面）。默认：true
// https: false, // 用于设置是否启用https，默认：false
proxy: {
// 设置代理
'/api': {
// 代理名称 凡是使用/api开头的地址都是用此代理
target: 'http://1.2.3.4:5000/', // 需要代理访问的api地址
changeOrigin: true // 允许跨域请求
// pathRewrite: {
// // 重写路径，替换请求地址中的指定路径
// '^/api': '/' // 将请求地址中的/api替换为空，也就是请求地址中不会包含/api/
// }
}
}
},
// 第三方插件配置
pluginOptions: {}
}
vue加载速度优化(cdn加速)：
https://blog.csdn.net/rayshaan0123/article/details/119703030
开启gzip压缩，nginx相关配置：
https://blog.csdn.net/a1983029606/article/details/115690820
开启 gzip 压缩，nginx配置实例：
location ~ .*\.(js|json|css)$ {
gzip on;
gzip_static on; # gzip_static是nginx对于静态文件的处理模块，该模块可以读取预先压缩的gz文件，这样可以减少每次请求进行gzip压缩的CPU资源消耗。
gzip_min_length 1k;
gzip_http_version 1.1;
gzip_comp_level 9;
gzip_types text/css application/javascript application/json;
root /dist;
}
二. 各配置详解
1、publicPath
- Type(类型): string
- Default(默认): ‘/’
- 作用：项目部署的基础路径
- 场景应用：（假设域名：
https://www.vueconfig.com）
1.'/'：默认部署在域名的根部。即：https://www.vueconfig.com/
2./childrenpath/：认为部署在https://www.vueconfig.com/childrenpath/的子路径下
3.'./'：相对路径（打包后部署到服务器中，从index.html开始计算的相对路径）
4.process.env.NODE_ENV === 'production' ? '/生产环境路径/' : ' ':不同开发环境的切换模式。
5.NODE_ENV：Node.js 暴露给执行脚本的系统环境变量。通常用于确定在开发环境还是生产环境。
2、outputDir
- Type(类型): string
- Default(默认): ‘dist’
- 作用：输出文件目录
- 场景应用：
1.'dist'：默认打包的文件夹名称。
2.'自定义文件名'：根据需求，自定义文件夹名称。
3、assetsDir
- Type(类型): string
- Default(默认): ‘’
- 作用：放置生成的静态资源 (js、css、img、fonts) 的目录。
- 场景应用：
1.''：静态资源 (js、css、img、fonts) 这四个文件夹在'dist'文件夹下
2.'自定义文件名'：静态资源在'自定义文件名'下，'自定义文件名'在'dist'文件夹下。即：dist-自定义文件名-(js、css、img、fonts)四个文件夹
4、indexPath
- Type(类型): string
- Default(默认): ‘index.html’
- 作用：用于设定打包生成的 index.html 文件的存储位置。
- 场景应用：
1.‘index.html’：一般用这个默认值，不改变
5、filenameHashing
- Type(类型): boolean
- Default(默认): true
- 作用：设置打包生成的的静态资源的文件名中是否加入hash以便控制浏览器缓存问题。
- 场景应用：
1.true：一般用这个默认值，不改变。
2.浏览器缓存：浏览器加载静态文件机制：当浏览器去加载一个页面的静态文件时，浏览器会先去缓存查找当前域名是否已存在这个文件。如果存在，则直接读取缓存里的文件，而不再向服务器请求该资源。浏览器这样的设定减少了请求资源的占用，同时也加快页面的加载速度。但是，因为这个缓存问题，开发人员就会遇到这样一个问题：当我们开发人员对某个静态文件（如：css、js）修改后，再到浏览器一跑，发现修改并没有起效。
3.解决浏览器缓存：要解决这个问题，我们就要保证每次改动后生成的文件不能与浏览器缓存中的文件名一致就可以了。因此，常用的方法就是给文件名添加一段随机数（hash就是随机数的一种）
6、lintOnSave
- Type(类型): boolean | ‘warning’ | ‘default’ | ‘error’
- Default(默认): ‘default’
- 作用：设置是否在开发环境下每次保存代码时都启用 eslint验证。
- 场景应用：
1.false：关闭 elsint 检测
2.true：开启每次保存都进行检测，效果与warning一样。（一般选择true）
3.'warning'：开启每次保存都进行检测，lint 报错信息将显示到控制台命令行，编译并不会失败。
4.'default'：开启每次保存都进行检测，lint 报错信息将显示到浏览器页面上，且编译失败。
5.'error'：开启每次保存都进行检测，lint 报错信息以及警告信息将显示到浏览器页面上，且编译失败。
7、runtimeCompiler
- Type(类型): boolean
- Default(默认): false
- 作用：是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。
- 场景应用：
1.false：一般用这个默认值，不改变。
8、transpileDependencies
- Type(类型): Array<string | RegExp>
- Default(默认): []
- 作用：默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。
- 场景应用：
1.[]：一般用这个默认值，不改变。
9、productionSourceMap
- Type(类型): boolean
- Default(默认): true
- 作用：设置生产环境的 source map 开启与关闭。
- 场景应用：
1.true：开启source map 。
2.false：关闭source map 。一般生产环境不需要source map，可以关闭，加速生产环境构建。
3.什么是 source map?：source map 直译过来就是资源地图。所以，source map的作用就是定位。source map定位的时浏览器控制台输出语句在项目文件的位置。
4.第一张图是没有source map，第二张图是有source map。第三张图是开启source map多的文件。只有 js 才有 .map 文件。
10、crossorigin
- Type(类型): string
- Default(默认): undefined
- 作用：设置生成的 HTML 中< link rel=“stylesheet”> 和 < script> 标签的 crossorigin 属性。需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。
- 场景应用：
1.undefined：一般用这个默认值，不改变。
11、integrity
- Type(类型): boolean
- Default(默认): false
- 作用：在生成的 HTML 中的 < link rel=“stylesheet”> 和 < script> 标签上启用 Subresource Integrity (SRI)。如果你构建后的文件是部署在 CDN 上的，启用该选项可以提供额外的安全性。需要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。另外，当启用 SRI 时，preload resource hints 会被禁用，因为 Chrome 的一个 bug 会导致文件被下载两次。
- 场景应用：
1.false：一般用这个默认值，不改变。
12、Webpack相关配置
在vue.config.js如果要新增/修改 webpack 的 plugins 或者 rules , 有2种方式。
rules：一些loader，loader用于特定的模块类型进行处理，比如.vue，.css文件处理
plugins：webpack的插件，用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等。
12.1 configureWebpack
- Type(类型): object | Function
- 官方文档说明:
如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
如果这个值是一个函数，则会接收被解析的配置作为参数。该函数既可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。- 作用：借助 configureWebpack我们可以实现随webpack配置的新增与修改.（跟chainWebpack作用相同，只是实现修改webpack方式不一样）
- 场景应用：
/* 引入打包分析插件 */
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
/* 引入压缩插件 但是导致项目启动的比较慢*/
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack')/* 不知道需不需要引入这个*/
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
configureWebpack: (config) => {
// 为生产环境修改配置...
if (process.env.NODE_ENV === 'production') {
// 打包可视化分析
config.plugins.push(new BundleAnalyzerPlugin());
/* js 压缩 */
config.plugins.push(new UglifyJsPlugin({
uglifyOptions: {
uglifyOptions: {
compress: {
drop_debugger: true,
drop_console: true, // 生产环境自动删除console
pure_funcs: ['console.log'] //移除console---后加入的
},
warnings: false
},
sourceMap: false,
parallel: true // 使用多进程并行运行来提高构建速度。默认并发运行数：os.cpus().length - 1。
}
}))
} else {
// 为开发环境修改配置...
}
// 开发生产共同配置别名
Object.assign(config.resolve, {
extensions: ['.js', '.vue', '.json'],// 省略文件扩展名的，默认值是 ['.wasm', '.mjs', '.js', '.json']，可以自由配置。在resolve对象里面，跟alias同一级就行
alias: {
'@': path.resolve(__dirname, './src'),
'assets': path.resolve(__dirname, './src/assets'),
'common': path.resolve(__dirname, './src/common'),
'components': path.resolve(__dirname, './src/components'),
'network': path.resolve(__dirname, './src/network'),
'configs': path.resolve(__dirname, './src/configs'),
'views': path.resolve(__dirname, './src/views'),
'plugins': path.resolve(__dirname, './src/plugins'),
}
})
},
12.2 chainWebpack
- Type(类型): Function
- 作用：Webpack配置另一种写法—— webpack-chain（链式操作）
- 场景应用：
chainWebpack: config => {
// 配置别名
config.resolve.alias
.set('@', resolve('src'))//设置@快捷到src目录
.set('assets', resolve('src/assets'))
.set('components', resolve('src/components'))
.set('layout', resolve('src/layout'))
.set('base', resolve('src/base'))
.set('static', resolve('src/static'));
// 删除预加载
config.plugins.delete('preload')
config.plugins.delete('prefetch')
// 压缩代码
config.optimization.minimize(true)
// 分割代码
config.optimization.splitChunks({
chunks: 'all'
})
// 压缩图片
config.module
.rule('images')
/* 需要下载这个图片压缩loader npm install --save-dev image-webpack-loader */
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
mozjpeg: { progressive: true, quality: 65 },
optipng: { enabled: false },
pngquant: { quality: [0.8,0.9], speed: 4 },
gifsicle: { interlaced: false },
webp: { quality: 75 },
});
},
13、Css相关配置
13.1 css.requireModuleExtension
- Type(类型): boolean
- Default(默认): true
- 作用：
1.用于设定，是否只有*.module.[ext]结尾的文件才会被视作CSS Modules 模块。
2.默认情况下，只有文件名中含有.modules的CSS相关文件还能使用CSS Modules。- 注意：
1.如果我们进行了关于css.loaderOptions.css的配置。一定要在配置文件中显性的指出css.requireModuleExtension的值。也就是说，我们一定要配置css.requireModuleExtension。
2.原来vue.config.js中配置的css.modules过时了，改为css.requireModuleExtension
module.exports = {
publicPath: './', // 基本路径
outputDir: 'dist' // 输出文件目录
// css相关配置
css: {
extract: false, // 是否使用css分离插件 ExtractTextPlugin
sourceMap: true, // 开启 CSS source maps?
// 因为配置了loaderOptions.css, 尽管requireModuleExtension的值为默认值，我们也需要指出
requireModuleExtension: true,
loaderOptions: {
css: {
// 注意：以下配置在 Vue CLI v4 与 v3 之间存在差异。
// Vue CLI v3 用户可参考 css-loader v1 文档
// https://github.com/webpack-contrib/css-loader/tree/v1.0.1
modules: {
localIdentName: '[local]_[hash:base64:8]'
}
}
}
}
}
13.2 css.loaderOptions
- Type(类型): Object
- Default(默认): {}
- 作用：用于向 CSS 相关的 loader 传递选项（设置）
- 相关的loader：
1.css-loader
2.postcss-loader
3.sass-loader
4.less-loader
5.stylus-loader
// vue.config.js
module.exports = {
css: {
loaderOptions: {
// 这里的选项会传递给 css-loader
css: {
// 配置 CSS Modules 的class命名规则
modules: {
localIdentName: '[local]_[hash:base64:8]'
}
},
// 这里的选项会传递给 postcss-loader
postcss: {
// 举例说明：动态根据UI稿移动端375px 适配最终比例大小
postcssOptions: {
plugins: [require('postcss-pxtorem')({
rootValue: 16, // 根字体大小
unitPrecision: 5,
propList : ['*'],
selectorBlackList : [],
replace: true,
mediaQuery: false,
minPixelValue: 0,
exclude: /node_modules/i
})]
}
},
// 给 sass-loader 传递选项
sass: {
// @/ 是 src/ 的别名
// 所以这里假设你有 `src/variables.sass` 这个文件
// 注意：在 sass-loader v7 中，这个选项名是 "data"
prependData: `@import "~@/variables.sass"`
},
// 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
// 因为 `scss` 语法在内部也是由 sass-loader 处理的
// 但是在配置 `data` 选项的时候
// `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
// 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
scss: {
prependData: `@import "~@/variables.scss";`
},
// 给 less-loader 传递 Less.js 相关选项
less:{
// http://lesscss.org/usage/#less-options-strict-units `Global Variables`
// `primary` is global variables fields name
globalVars: {
primary: '#fff'
}
}
}
}
}
（1） postcss-loader
-
什么是PostCSS呢？
- PostCSS是一个通过JavaScript来转换样式的工具；
- 这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置
-
postcss-loader只是一个工具，里面包含了很多功能插件：
autoprefixer插件自动补齐CSS3前缀postcss-preset-env将一些现代的CSS特性，转成大多数浏览器认识的CSS。包括自动补齐CSS3前缀。所以实际开发不用autoprefixer。postcss-plugins-px2rem移动端可用 px => rem转换（flexible.js中75px:1rem）
13.3 css.extract
- Type(类型): boolean | Object
- Default(默认): 生产环境下是 true，开发环境下是 false
- 作用：用于控制是否强制分离vue 组件内的css。
- 开启和关闭区别：
关闭：打包后的dist文件夹中，没有css文件夹。组件样式以内部样式表的形式加载的。
开启：打包后的dist文件夹中，有css文件夹。开启后通过link引入css文件
module.exports = {
publicPath: './', // 基本路径
outputDir: 'dist' // 输出文件目录
// css相关配置
css: {
extract: false // 是否使用css分离插件 ExtractTextPlugin
}
}
13.4 css.sourceMap
- Type(类型): boolean
- Default(默认): false
- 作用：设置是否开启 css 的 sourse map功能。css 的 sourse map作用类似与 js 的 sourse map。
- 注意：
1.开启可能会影响构建性能。
2.在使用css.sourceMap时，我们最好关闭css.extract。
module.exports = {
publicPath: './', // 基本路径
outputDir: 'dist' // 输出文件目录
// css相关配置
css: {
extract: false, // 是否使用css分离插件 ExtractTextPlugin
sourceMap: true // 开启 CSS source maps?
}
}
14、代理相关配置
14.1 devServer
- Type(类型): Object
- Default(默认): false
- 作用：通过devServer，可以在NodeJs架设起临时的服务器用于项目的运行与调试。
devServer: {
inline: true, // 用于设置代码保存时是否自动刷新页面。默认：true
host: '10.32.120.69', // ip 本地
port: 2021, // 设置端口号
open: false, //配置自动启动浏览器，默认：false
openPage: '/different/page', // 指定deserver 编译完成后自动打开的页面.需要配合 open：true 来使用。如果Vue router 为 hash mode。应在url前面补上/#。如：openPage: '/#/about'
headers:{ // 在所有响应中添加首部内容
'X-Custom-Foo': 'bar'
},
hot: true, // 用于设置代码保存时是否进行热更新（局部刷新，不刷新整个页面）。默认：true
hotOnly: false, // hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下，前者会自动刷新页面，后者不会刷新页面，而是在控制台输出热更新失败.
disableHostCheck: true, //可以被外网访问
https: false, // 用于设置是否启用https，默认：false
proxy: null, //设置代理
// proxy: { //目的是解决跨域，若测试环境不需要跨域，则不需要进行该配置
// '/api': { // 拦截以 /api 开头的url接口
// target: 'https://api.taobao.cn/', //目标接口域名
// changeOrigin: true, //是否跨域
// ws: true, //如果要代理 websockets，配置这个参数
// secure: false, // 如果是https接口，需要配置这个参数
// // 标识替换
// // 原请求地址为 /api/getData 将'/api'替换''时，
// // 代理后的请求地址为： http://xxx.xxx.xxx/getData
// // 若替换为'/other',则代理后的请求地址为 http://xxx.xxx.xxx/other/getData
// pathRewrite: { // 标识替换
// '^/api': '/' //重写接口 后台接口指向不统一 所以指向所有/
// '^/api': '/api/mock'
// }
// }
// }
}
三. npm安装包–save和–save-dev 区别
-S(s)是--save的缩写 也就是 添加在dependencies生产环境中
-D(d)是--save-dev的缩写 也就是添加在devDependencies开发环境中
-G(g)是添加全局，比如我们要全局使用yarn工具，就可以全局安装，可以理解为添加了一个环境变量
dependencies文件夹
生产环境依赖。生产环境一般是位于服务器上的，一般只会放index.html 以及css和js这种静态资源。生产环境依赖则说明必须要使用该环境，比如axios等
devDependencies
开发环境依赖。也就是说只需要我们在写代码时需要使用的，比如babel，webpack等，这些在生产环境上是不需要的
如果只是npm i xxx，那么默认添加到生产依赖，也就是类似 npm i xxx --save
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
7
0- 0
已为社区贡献2条内容
所有评论(0)