vue2 vue.config.js文件最全配置加每一行配置语句的注释注释
时间: 2023-11-02 17:10:04 浏览: 123
Vue CLI4 Vue.config.js标准配置(最全注释)
以下是一个包含注释的最全的 vue.config.js 文件配置:
```javascript
module.exports = {
// 项目部署的基础路径,配置如:/my-app/,则打包后所有资源路径都会加上这个前缀,可以配置为相对路径"./"
publicPath: '/',
// 输出文件目录,默认值为'dist',生产环境构建文件的目录
outputDir: 'dist',
// 静态资源目录(js、css、img、fonts),相对于outputDir的路径
assetsDir: 'static',
// eslint-loader 是否在保存的时候检查,true为检查,false为不检查
lintOnSave: true,
// 是否使用包含运行时编译器的Vue核心的构建
runtimeCompiler: false,
// 生产环境sourceMap
productionSourceMap: false,
// webpack配置
configureWebpack: {
// 设置别名
resolve: {
alias: {
'@': resolve('src')
}
}
},
// vue-loader配置
chainWebpack: config => {
// 移除 prefetch 插件
config.plugins.delete('prefetch')
// 添加新的svg-sprite-loader处理svgIcon
config.module
.rule('svgIcon')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
// 修改images loader,添加svg处理
config.module
.rule('images')
.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
.exclude.add(resolve('src/icons'))
.end()
// 对vue-cli内部的webpack配置进行更细粒度的修改
// https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
config
.when(process.env.NODE_ENV !== 'development',
config => {
// 生产环境配置
}
)
.when(process.env.NODE_ENV === 'development',
config => {
// 开发环境配置
}
)
},
// CSS相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps
sourceMap: false,
// css预设器配置项
loaderOptions: {
// sass-loader配置
sass: {
// 全局注入变量和mixin
data: `
@import "@/styles/variables.scss";
@import "@/styles/mixin.scss";
`
}
},
// 启用 CSS modules for all css / pre-processor files.
requireModuleExtension: false
},
// 开发服务配置
devServer: {
// 端口号
port: 8000,
// 启动时自动打开浏览器
open: true,
// 反向代理配置
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: { '^/api': '' }
}
}
},
// 第三方插件配置
pluginOptions: {
// ...
}
}
function resolve(dir) {
return path.join(__dirname, dir)
}
```
阅读全文