vue.config.js 是一个可选的配置文件,如果项目的根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。
下面是 vue.config.js 中的所有配置项及其解释:(太多找不着,按 ctrl + F 进行全局搜,搜不到的评论艾特我,我进行补充)
module.exports = {
publicPath: '/', // 部署应用包时的基本 URL
outputDir: 'dist', // 打包输出目录
assetsDir: '', // 静态资源目录
indexPath: 'index.html', // 指定生成的 index.html 的输出路径
filenameHashing: true, // 文件名哈希
pages: undefined, // 多页面配置
lintOnSave: true, // eslint-loader 是否在保存的时候检查
runtimeCompiler: false, // 是否使用包含运行时编译器的 Vue 构建版本
transpileDependencies: [], // 默认情况下 babel-loader 忽略其中的所有文件 node_modules
productionSourceMap: true, // 生产环境是否生成 sourceMap 文件
crossorigin: undefined, // 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性
integrity: false, // 是否在生成的 HTML 中启用 Subresource Integrity (SRI)
configureWebpack: {}, // webpack 配置
chainWebpack: () => {}, // webpack 链式配置
css: {
modules: false, // 启用 CSS modules
extract: true, // 是否使用 CSS 分离插件
sourceMap: false, // 是否为 CSS 开启 source map
loaderOptions: {}, // css-loader 选项
},
devServer: {
open: false, // 是否自动打开浏览器
host: '0.0.0.0', // 指定使用一个 host,默认是 localhost
port: 8080, // 端口号
https: false, // 是否使用 https
hotOnly: false, // 是否开启热更新
proxy: null, // 配置跨域代理
before: app => {}, // 提供在服务器内部的其他中间件之前执行自定义中间件的能力
},
pluginOptions: {}, // 第三方插件配置
};
下面是一个 vue.config.js 的示例:
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/',
outputDir: 'dist',
assetsDir: 'static',
indexPath: 'index.html',
filenameHashing: true,
pages: {
index: {
entry: 'src/main.js',
template: 'public/index.html',
filename: 'index.html',
title: 'Index Page',
chunks: ['chunk-vendors', 'chunk-common', 'index'],
},
about: {
entry: 'src/about.js',
template: 'public/about.html',
filename: 'about.html',
title: 'About Page',
chunks: ['chunk-vendors', 'chunk-common', 'about'],
},
},
lintOnSave: true,
runtimeCompiler: false,
transpileDependencies: [],
productionSourceMap: true,
crossorigin: undefined,
integrity: false,
configureWebpack: {},
chainWebpack: () => {},
css: {
modules: false,
extract: true,
sourceMap: false,
loaderOptions: {
//这段代码是在配置 webpack 的 loader 选项,其中包含了 sass 和 scss 两个选项。
//在这两个选项中,都设置了 additionalData 属性,其含义是在编译 sass 或 scss 文件时,
//自动引入指定的基础样式文件 _base.scss。
//这样做的好处是,可以避免在每个 sass 或 scss 文件中都手动引入基础样式文件,
//提高了开发效率。同时,也可以统一管理基础样式文件,方便维护。
sass: {
additionalData: '@import "@s/_base.scss";'
},
scss: {
additionalData: '@import "@s/_base.scss";'
}
},
},
devServer: {
open: true,
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': '',
},
},
},
before: app => {},
},
pluginOptions: {},
};
这个示例中,我们配置了以下内容:
publicPath
:根据环境变量设置应用包的基本 URL。outputDir
:打包输出目录。assetsDir
:静态资源目录。indexPath
:指定生成的 index.html 的输出路径。filenameHashing
:文件名哈希。pages
:多页面配置。lintOnSave:eslint-loader
是否在保存的时候检查。runtimeCompiler
:是否使用包含运行时编译器的 Vue 构建版本。transpileDependencies
:默认情况下 babel-loader 忽略其中的所有文件 node_modules。productionSourceMap
:生产环境是否生成 sourceMap 文件。crossorigin
:设置生成的 HTML 中《 link rel=“stylesheet”》 和《script》 标签的 crossorigin 属性。integrity
:是否在生成的 HTML 中启用 Subresource Integrity (SRI)。devServer
:开发服务器配置。proxy
:配置跨域代理。
详细解读 devServer 各个属性
在webpack的devServer配置中,proxy属性用于配置代理服务器,使开发环境中的请求可以被代理到其他服务器上。
proxy属性的所有属性含义如下:
-
target
:代理的目标服务器地址,可以是一个字符串或一个对象,字符串表示目标服务器的地址,对象可以包含以下属性:host
:目标服务器的主机名port
:目标服务器的端口号protocol
:目标服务器的协议,默认为http
-
changeOrigin
:是否改变请求头中的origin字段,默认为false,表示不改变 -
secure
:是否使用https协议,默认为false -
pathRewrite
:路径重写规则,可以是一个对象或一个函数,用于将请求的路径重写为代理服务器上的路径 -
bypass
:一个函数,用于决定哪些请求不需要被代理,返回true表示不需要代理,返回false表示需要代理 -
ws
:是否启用WebSocket代理,默认为false。 -
headers
: 可以用来设置请求头信息
举例:
devServer: {
proxy: {
'/api': {
ws:false,
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
},
headers: {
Accept: 'application/json'
}
}
}
}
这个配置表示将所有以/api开头的请求代理到本地的3000端口上,同时将请求路径中的/api替换为空字符串。
详细解读 configureWebpack 各个属性
在Vue项目中,可以通过vue.config.js文件来配置webpack,其中configureWebpack
属性可以用来自定义webpack配置。下面是configureWebpack
中常用的属性及其作用:
resolve
:用于配置模块的解析方式,可以设置模块的查找路径、别名等。
const path = require('path'); // 先引入path模块
module.exports = {
configureWebpack: {
resolve: {
alias: {
// 将 ../../assets/img/1.png 转化为 @/1.png
// 将 ../../style/test/1.scss 转化为 @/1.scss
'@a': path.join(__dirname, 'src/assets/img')
'@s': path.join(__dirname, 'src/style'),
}
}
}
}
plugins
:用于配置webpack插件,可以添加自定义的插件或修改默认插件的配置。
const MyPlugin = require('./my-plugin')
module.exports = {
configureWebpack: {
plugins: [
new MyPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})
]
}
}
module
:用于配置模块的加载方式,可以设置不同类型的文件的loader。
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
}
}
optimization
:用于配置webpack的优化策略,可以设置代码分割、压缩等。
module.exports = {
configureWebpack: {
optimization: {
splitChunks: {
chunks: 'all'
},
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true
}
}
})
]
}
}
}
devtool
:用于配置source map的生成方式,可以设置不同的选项来控制source map的质量和生成速度。
module.exports = {
configureWebpack: {
devtool: 'cheap-module-eval-source-map'
}
}
performance
:用于配置webpack的性能优化策略,可以设置文件大小限制等。
module.exports = {
configureWebpack: {
performance: {
hints: 'warning',
maxAssetSize: 1024 * 1024,
maxEntrypointSize: 1024 * 1024
}
}
}
chainWebpack 是干嘛的
chainWebpack 属性可以用来自定义 webpack 的配置。
配置跟原始的webpack差不多,不经常在这里面修改,但也举个常用的例子
在生产环境下去除 console
和 debugger
module.exports = {
chainWebpack: (config) => {
config.optimization.minimizer('terser').tap((args) => {
args[0].terserOptions.compress.drop_console = process.env.NODE_ENV === 'production';
args[0].terserOptions.compress.drop_debugger = process.env.NODE_ENV === 'production';
return args;
});
}
}
transpileDependencies : ES6+ 转换成 ES5 (Babel 进行转换)
在 Vue.js 项目中,如果我们使用了一些第三方库或插件,这些库可能使用了 ES6+ 的语法,而一些旧版的浏览器并不支持这些语法,因此需要将这些库的代码转换成 ES5 的语法。这时候就需要使用 Babel 进行转换。但是,如果我们将所有的第三方库都进行转换,会导致构建时间变长,因此我们可以通过配置 transpileDependencies
属性来指定需要进行转换的第三方库。
transpileDependencies
是一个数组,其中的每个元素都是一个字符串或正则表达式,用于匹配需要进行转换的依赖库的名称。默认情况下,Vue CLI 会将 node_modules
目录下的所有依赖库都进行转换,但是我们可以通过配置 transpileDependencies
来指定需要转换的依赖库。
例如,我们可以在 vue.config.js
文件中添加以下配置:
module.exports = {
transpileDependencies: [
'my-dep',
/other-dep/
]
// transpileDependencies: [/node_modules/] 这是默认的
}
这里我们指定了两个需要进行转换的依赖库:my-dep
和 other-dep
。其中,my-dep
是一个字符串,表示需要转换的依赖库的名称;/other-dep/
是一个正则表达式,表示需要转换的依赖库的名称符合该正则表达式的规则。
需要注意的是,如果我们指定了某个依赖库进行转换,但是该依赖库本身已经使用了 Babel 进行转换,那么就会导致重复转换,从而增加构建时间和文件大小。因此,我们需要根据实际情况来选择需要进行转换的依赖库。
---------------------
作者:只会cv的小前端
来源:CSDN
原文:https://blog.csdn.net/Wancc123/article/details/130357789
版权声明:本文为作者原创文章,转载请附上博文链接!
内容解析By:CSDN,CNBLOG博客文章一键转载插件