写了一个vue-cli3配置（https://segmentfault.com/a/11...），建议升级到vue-cli4.vue-cli4脚手架创建的目录比较合理。其他的好像没什么变化。vue-cli升级官网介绍。推荐使用yarn卸载：如果你的版本是npmuninstallvue-cli-g或者yarnglobalremovevue-cli如果是vue-cli3，npmuninstall@vue/cli-g或者yarnglobalremove@vue/cliinstall:npminstall-g@vue/cli#ORyarnglobaladd@vue/cliCreateyourproject(创建方法见上文链接)vuecreatehello-world(项目名)关注sub下的vue.config.js代码-环境打包如下（注意process.env.outputDir与process.env.VUE_APP_MODE和.env文件相关）constpath=require('path')module.exports={publicPath:'./',//basic路径，打包时添加。outputDir:process.env.outputDir,//输出文件目录lintOnSave:false,//保存时是在Check中的eslint-loader//见https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md//webpack配置chainWebpack:(config)=>{config.resolve.symlinks(true)},configureWebpack:(config)=>{if(process.env.VUE_APP_MODE==='production'){//生产环境修改配置...config.mode='production'}else{//开发环境修改配置...config.mode='development'}Object.assign(config,{//开发和开发通用配置生产再解决：{别名：{'@':path.resolve(__dirname,'./src'),'@c':path.resolve(__dirname,'./src/components'),'@p':路径。resolve(__dirname,'./src/views')}//别名配置}})},productionSourceMap:false,//生产环境是否生成sourceMap文件//css相关配置css:{//extract:true,//是否使用css分离插件ExtractTextPluginsourceMap:false,//启用CSSsourcemaps？loaderOptions:{css:{},//此处的选项将传递给css-loaderpostcss:{plugins:[//将px单位转换为rem单位require('postcss-pxtorem')({rootValue:75,//转换的基数（设计图750的根字体为32）selectorBlackList:['.van-'],//忽略的选择器，保留为px可以从px更改为rem.minPixelValue:2//设置要替换的最小像素值。}),require('autoprefixer')]//plugins:[//require('autoprefixer')//]}//这里的选项会传递给postcss-loader},//csspresetter配置项见https:///cli.vuejs.org/zh/config/#css-loaderoptions//modules:false,//为所有css/预处理器文件启用CSS模块。requireModuleExtension:true},parallel:require('os').cpus().length>1,//是否为Babel或TypeScript使用线程加载器。当系统的CPU有多个内核且仅适用于生产构建时，此选项会自动启用。pwa:{},//PWA插件相关配置见https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa//webpack-dev-server相关配置devServer:{open:true,//自动打开浏览器host:'0.0.0.0',//允许外部ip访问port:8022,//端口https:false,//启用httpsoverlay:{warnings:true,errors:true},//页面弹出错误和警告//proxy:{//[process.env.VUE_APP_MODE]:{//target:`http://cs.ep.eichong.com:2482/api`,//changeOrigin:true,//pathRewrite:{//看后台有没有，决定是否重写//["^"+process.env.VUE_APP_API_URL]:""//}//}},//第三方插件ConfigurepluginOptions:{}}.envfilesindifferentenvironments(NODE_ENVparameter好像无关),VUE_APP_API_URL是接口URL，直接调用process.env.VUE_APP_API_URLfile.env.devNODE_ENV='production'VUE_APP_MODE='dev'VUE_APP_API_URL='--------'outputDir=devfile.env.developmentNODE_ENV='production'VUE_APP_MODE='development'VUE_APP_API_URL='------'outputDir=developmentfile.env.preNODE_ENV='production'VUE_APP_MODE='pre'VUE_APP_API_URL='----'outputDir=prefile.env.productionNODE_ENV='production'VUE_APP_MODE='production'VUE_APP_API_URL='-----'outputDir=production修改package.json,打包命令为yarnserve(running.env.development)yarnbuild(running.env.development)yarnbuild-devyarnbuild-testyarnbuild-preyarnbuild-publish"scripts":{"serve":"vue-cli-serviceserve","build":"vue-cli-servicebuild","build-dev":"vue-cli-servicebuild--modedev","build-test":"vue-cli-servicebuild--模式测试","build-pre":"vue-cli-servicebuild--modepre","build-publish":"vue-cli-servicebuild&&vue-cli-servicebuild--modeproduction","lint":"vue-cli-servicelint"}不同打包的输出路径分别是dist,dev,test,pre,production然后修改.gitignore文件，添加如下/dist/dev/test/pre/production
