本文主要是介绍vue多种环境配置文件配置,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
使用如下
在package.json新增命令脚本
"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","serve:alpha": "vue-cli-service serve --mode alphaser","build:alpha": "vue-cli-service build --mode alpha"},
在项目根目录下,新增配置文件
--mode alphaser意思为指定环境模式为alphaser,会调用.env.alphaser文件。
vue-cli-service serve 命令默认不指定则为 development。
vue-cli-service build 命令默认不指定则为 production。
所以我们建立多个配置文件
比如.env.alphaser,内容大致如下
这些变量,是整个项目都可以访问全局变量
NODE_ENV = development
BASE_URL = /
VUE_APP_ENV = development
VUE_APP_ENV_CHN = 前端环境:本地开发环境。 后端环境:测试服环境
VUE_APP_SERVER = https://t-12368-h5.aegis-info.com/casservice/web/v1/
比如.env.production,内容大致如下
NODE_ENV = production
BASE_URL = /caspage/
VUE_APP_ENV = production
VUE_APP_ENV_CHN = 前端环境:正式环境。 后端环境:正式服环境
VUE_APP_SERVER = https://shandong-12368.aegis-info.com/casservice
然后对vue项目做如下改造
vue.config.js
动态配置打包的路径和目录(即项目内所有的请求链接地址都是publicPath)
本地开发代理地址proxy
module.exports = {publicPath: process.env.BASE_URL,devServer: {proxy: process.env.VUE_APP_SERVER}
};
如果项目里使用aixos,那么还要对其配置
// 本地会自动走vue.config.js里的代理地址,不需要配置baseUrl。否则代理会失效
if (process.env.VUE_APP_ENV !== 'development') {axios.defaults.baseURL = process.env.VUE_APP_SERVER;
}
如果你的路由采用history模式
配置路由,因为服务器可能不一定将你的项目放在根目录下
const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})
试试吧
[本地开发启动]
使用本地服务接口:npm run serve
使用测试服务接口:npm run serve:alpha
[线上打包部署]
使用测试服务接口:npm run build:alpha
使用正式服务接口:npm run build
这篇关于vue多种环境配置文件配置的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!