vue-cli项目配置多环境的详细操作过程
vue-cli默认只提供了dev和prod两种环境。但其实正真的开发流程可能还会多一个sit或者stage环境，
就是所谓的测试环境和预发布环境。所以我们就要简单的修改一下代码。其实很简单就是设置不同的环境变量
详细操作过程
1.在package.json中添加test命令
"scripts":{
"dev":"cross-envNODE_ENV=onlinenodebuild/dev-server.js--host192.168.1.8",
"local":"cross-envNODE_ENV=localnodebuild/dev-server.js",
"build":"nodebuild/build.js",
"build:prod":"cross-envNODE_ENV=productionenv_config=prodnodebuild/build.js",
"build:sit":"cross-envNODE_ENV=productionenv_config=sitnodebuild/build.js"
},
2.创建环境文件(BASE_API为接口的主地址)
/config/dev.env.js(开发环境)
module.exports={
NODE_ENV:'"development"',
ENV_CONFIG:'"dev"',
BASE_API:'"http://192.168.1.7"'//这里是后端和后端做开发测试
}
/config/sit.env.js(测试环境,测试服)
module.exports={
NODE_ENV:'"production"',
ENV_CONFIG:'"sit"',
BASE_API:'"http://test.todomore.cn"'
}
/config/prod.env.js(生产环境,正式服)
module.exports={
NODE_ENV:'"production"',
ENV_CONFIG:'"prod"',
BASE_API:'"http://www.todomore.cn"'
}
3.修改config/index.js
varpath=require("path")
module.exports={
//开发环境配置
dev:{
assetsSubDirectory:"static",
assetsPublicPath:"/",
port:7127,
//context:[
////代理路径
//"/shopping",
//],
//proxypath:"http://localhost:7127",
cssSourceMap:false
},
//生产环境配置
build:{
index:path.resolve(__dirname,"../../../public/store/index.html"),
assetsRoot:path.resolve(__dirname,"../../../public/store"),
assetsSubDirectory:"static",
assetsPublicPath:"/store/",
productionSourceMap:true,
//SurgeorNetlifyalreadygzipallstaticassetsforyou.
//Beforesettingto`true`,makesureto:
//npminstall--save-devcompression-webpack-plugin
productionGzip:false,
productionGzipExtensions:["js","css"]
}
}
4.安装插件(如果package.json里面本来就有cross-env的话就不用这一步了)
npminstall--savecross-env
修改webpack.prod.conf
原来的env是引入的prod.env:
//constenv=require('../config/prod.env')
修改为：
constenv=require("../config/"+process.env.env_config+".env")
6.修改提示语
跟build:pre不同的是node_env需要指向config中的文件名称，与之对应的是env_config的名字。
这样便可以打包成功了。
build.js中有一段描述：
jsconstspinner=ora("buildingforprod....")
可以动态修改为：
jsconstspinner=ora("buildingfor"+process.env.env_config)
使用命令
#生产环境(正式服) npmrunbuild:prod #测试环境(测试服) npmrunbuild:sit
生成在根目录dist的配置
index:path.resolve(__dirname,'../dist/index.html'),//入口文件路径 assetsRoot:path.resolve(__dirname,'../dist'),//生成在/dist assetsSubDirectory:'static',//资源子目录 assetsPublicPath:'/',//资源公共路径
总结
以上所述是小编给大家介绍的vue-cli项目配置多环境的详细操作过程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！