vue项目配置生产、测试和开发环境
目前的 web 项目开发基本都是基于前后端分离的模式。在实际的开发过程中,从开发到测试完成、发布到线上所调用到的接口地址可能都不一样,那就需要在项目中分别配置各个环境的接口地址(或者域名,也可以定义不同环境下的不同变量)。首先,在项目根目录下新建3个文件 .env 、.env.test、 .env.production第二步,编辑文件.env(开发环境)NODE_ENV=developmentVU
·
目前的 web 项目开发基本都是基于前后端分离的模式。
在实际的开发过程中,从开发到测试完成、发布到线上所调用到的接口地址可能都不一样,那就需要在项目中分别配置各个环境的接口地址(或者域名,也可以定义不同环境下的不同变量)。
首先,在项目根目录下新建3个文件 .env 、.env.test、 .env.production
第二步,编辑文件
.env(开发环境)
NODE_ENV=development
VUE_APP_API_URL= 'http://localhost:8080/' // 开发接口域名
.env.test(测试环境)
NODE_ENV=test
VUE_APP_API_URL= 'http://localhost:8080/' // 测试环境接口域名
.env.production(生产环境)
NODE_ENV=production
VUE_APP_API_URL= 'http://localhost:8080/' // 生产环境接口域名
第三步,修改 baseURL
vue 项目一般配套使用 axios 进行接口请求,设置基本请求路径如下,让它根据环境请求不同域名下的接口。
axios.defaults.baseURL = process.env.VUE_APP_API_URL
第四步,打包配置
在 package.json 文件的 scripts 对象中加入
"build:test": "vue-cli-service build --mode test", // 打包测试环境
"build:prod": "vue-cli-service build --mode production", // 打包生产环境
"build": "vue-cli-service build", // 默认打包为开发环境
完成后,在终端运行对应代码,进行打包。如
npm run build
npm run build:test
npm run build:prod
更多推荐
已为社区贡献1条内容
所有评论(0)