网上关于cli3中vue.config.js的配置有很多，能满足各种需要。我根据网上的一些文章摘要了一些内容，然后结合自己实际中项目的实际使用情况，来写一些这个文章，也给后来者一些启发，更是方便自己以后查阅。
先直接上代码
//vue.config.js
const path = require('path')
const debug = process.env.NODE_ENV !== 'production'
const webpack = require('webpack')
let env = process.argv[4];
console.log(process.argv)
console.log('---------------------')
console.log(process.argv[4])
//如果不携带参数则默认prod生产环境
if (['dev', 'beta', 'prod'].indexOf(env) < 0) {
env = 'prod';
}
let api_root = ''; //网址名称
let baseURI = ''; //CDN路径
switch (process.argv[4]) {
case undefined || 'undefined':
api_root = "http://www.baidu.com/";
baseURI = 'http://www.baidu.com/';
break;
case 'dev':
api_root = "http://www.baidu.com/";
baseURI = 'http://www.baidu.com/';
break;
case 'beta':
api_root = "http://www.baidu.com/";
baseURI = 'http://www.baidu.com/';
break;
case 'prod':
api_root = "http://www.baidu.com/";
baseURI = 'http://www.baidu.com/';
break;
default:
break;
}
//插件用于在全局获取路径或其他
var definePlugin = new webpack.DefinePlugin({
API_ROOT: JSON.stringify(api_root),
});
module.exports = {
publicPath: baseURI, // 根域上下文目录，原baseURI
outputDir: env, // 构建输出目录
assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
lintOnSave: false, // 是否开启eslint保存检测，有效值：ture | false | 'error'
runtimeCompiler: true, // 运行时版本是否需要编译
transpileDependencies: [], // 默认babel-loader忽略mode_modules，这里可增加例外的依赖包名
productionSourceMap: false, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
css: { // 配置高于chainWebpack中关于css loader的配置
// modules: true, // 是否开启支持‘foo.module.css’样式
// extract: true, // 是否使用css分离插件 ExtractTextPlugin，采用独立样式文件载入，不采用<style>方式内联至html文件中
sourceMap: false, // 是否在构建样式地图，false将提高构建速度
loaderOptions: { // css预设器配置项
}
},
parallel: require('os').cpus().length > 1, // 构建时开启多进程处理babel编译
pluginOptions: { // 第三方插件配置
definePlugin
},
pwa: { // 单页插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
},
devServer: {
open: true,
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: null,
// proxy: {
// '/api': {
// target: '<url>',
// ws: true,
// changOrigin: true
// }
// },
before: app => { }
}
}
我需要打包三种环境下的代码，生成对应的打包文件，dev,beta,prod,上面的代码添加在根目录下你自己新创建的vue.config.js文件，当然，你也可以根据自己的实际情况来做另外的修改，除此之外还需要修改package.json文件里面的内容
"build-dev": "vue-cli-service build --mode dev",
"build-beta": "vue-cli-service build --mode beta",
"build-prod": "vue-cli-service build --mode prod"
分别对应三种不同的环境，不过我这里不同的是，没有跟其他人一样创建.env.文件名文件，但是不影响打包以后资源文件的路径和API接口的主路径。
