全面:vue.config.js 的完整配置
vue.config.js
是一个可选的配置文件,如果项目的根目录中存在这个文件,那么 Vue CLI 会自动识别并使用这个文件的配置选项。以下是一个 vue.config.js
文件的完整配置,包含了一些常用的配置选项:
module.exports = {
// 基本路径
publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
// 输出文件目录
outputDir: 'dist',
// 静态资源目录 (js, css, img, fonts)
assetsDir: 'assets',
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false,
// CSS 相关选项
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false
},
// devServer 代理设置
devServer: {
host: '0.0.0.0',
port: 8080,
https: false,
open: true,
proxy: {
// 配置跨域处理 可以设置你想要代理的接口
'/api': {
target: 'http://api.example.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
},
// 插件选项
pluginOptions: {
// ...
},
// configureWebpack 或 chainWebpack 调整内部webpack配置
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
} else {
// 为开发环境修改配置...
}
},
chainWebpack: config => {
config.plugin('html').tap(args => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
} else {
// 为开发环境修改配置...
}
return args;
});
}
};
这个配置文件包含了一些基本的配置选项,比如 publicPath
、outputDir
、assetsDir
、css.extract
和 devServer
代理设置。同时,它展示了如何使用 configureWebpack
和 chainWebpack
来自定义 webpack 配置。根据你的项目需求,你可以添加或修改这些配置。
评论已关闭