vue.config.js 是一个可选的配置文件，如果项目的根目录中没有这个文件，你需要手动创建它。这个文件是一个 Node.js 模块，会导出一个包含了 Vue CLI 项目配置的对象。
下面是一些常见的 vue.config.js 配置项：
基本路径
module.exports = {
publicPath: './'
}
输出目录
javascript复制代码
module.exports = {
outputDir: 'dist'
}
放置生成的静态资源 (js、css、img、fonts)
javascript复制代码
module.exports = {
assetsDir: ''
}
配置 webpack-dev-server 行为
javascript复制代码
module.exports = {
devServer: {
port: 8080, // 端口号
open: true, // 自动打开浏览器
hotOnly: false, // 热更新
proxy: { // 配置跨域
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}
}
}
配置 webpack
javascript复制代码
module.exports = {
configureWebpack: {
plugins: [
// 配置插件
]
},
chainWebpack: config => {
// 修改 webpack 配置
}
}
CSS 相关配置
javascript复制代码
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import "@/styles/variables.scss";`
}
}
}
}
配置 devtools
javascript复制代码
module.exports = {
devtool: 'source-map'
}
生产环境构建
javascript复制代码
module.exports = {
productionSourceMap: false, // 是否生成 sourceMap 文件
parallel: require('os').cpus().length - 1, // 构建时启用多进程
// 其他 webpack 配置...
}
配置 pwa
javascript复制代码
module.exports = {
pwa: {
name: 'My App',
themeColor: '#4DBA87',
msTileColor: '#000000',
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black',
iconPaths: {
favicon32: 'favicon.ico',
favicon16: 'favicon.ico',
appleTouchIcon: 'icons/apple-touch-icon-152x152.png',
maskIcon: 'icons/safari-pinned-tab.svg',
msTileImage: 'icons/msapplication-icon-144x144.png'
}
}
}
配置 Babel
javascript复制代码
module.exports = {
babel: {
presets: [
// 预设配置
],
plugins: [
// 插件配置
]
}
}
第三方插件配置
javascript复制代码
module.exports = {
// 其他插件的配置
pluginOptions: {
// 例如配置 element-ui 插件
elementUi: {
size: 'small'
}
}
}
这些只是 vue.config.js 的一些常见配置项，实际上还有很多其他的配置项和细节可以调整。你可以根据项目的实际需求进行配置。
注意：上述示例中的 <url> 和 <other_url> 需要替换为你实际的 URL。同时，这些配置项并不一定都需要在你的 vue.config.js 文件中全部列出，你可以只选择你需要的配置项进行配置。
在 vue.config.js 中，configureWebpack 选项允许你修改内部的 Webpack 配置。这给了你很大的灵活性来添加或覆盖默认配置。
configureWebpack 的详细配置示例：
javascript复制代码
module.exports = {
configureWebpack: {
// 添加全局变量
plugins: [
new webpack.DefinePlugin({
'process.env.VUE_APP_TITLE': JSON.stringify('My App')
})
],
// 修改输出
output: {
// 输出目录（相对于 process.cwd() 或 outputDir）
path: path.resolve(__dirname, 'dist'),
// 文件名
filename: '[name].[contenthash].js',
// 其他的输出配置...
},
// 修改模块解析规则
resolve: {
// 别名配置
alias: {
'@': path.resolve(__dirname, 'src')
},
// 其他的解析配置...
},
// 修改模块规则
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader',
options: {
// vue-loader 配置项
compilerOptions: {
isCustomElement: tag => tag === 'my-custom-element'
}
}
},
// 其他规则...
]
},
// 优化和性能
optimization: {
splitChunks: {
chunks: 'all', // 对同步加载和异步加载的chunks都进行分割
},
minimize: true, // 开启压缩
},
// 添加或覆盖 devtool 配置
devtool: 'source-map',
// 修改其他 Webpack 配置项...
}
}
在上面的示例中：
- 使用
webpack.DefinePlugin添加了一个全局变量process.env.VUE_APP_TITLE。 - 修改了输出的目录和文件名。
- 添加了别名配置，使得
@可以直接指向src目录。 - 对
.vue文件加载器vue-loader进行了配置。 - 启用了代码分割和压缩。
- 设置了 source map。
你可以根据需要修改或添加更多的 Webpack 配置项。记住，任何你添加或修改的配置都应该遵循 Webpack 的配置规范。
请注意，configureWebpack 是一个对象，因此你可以在其中添加任何有效的 Webpack 配置。如果你想要完全替换掉默认的 Webpack 配置，可以使用 configureWebpack.renderer 和 configureWebpack.server 字段分别针对客户端和服务器端进行配置。
最后，确保你使用的 Webpack 配置项与你的 Webpack 版本兼容，因为不同版本的 Webpack 可能会有不同的配置项和语法。
原文链接：https://juejin.cn/post/7341192656994009099 作者：山水有轻音
