这篇文章主要介绍“vue中如何区分不同的环境”,在日常操作中,相信很多人在vue中如何区分不同的环境问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue中如何区分不同的环境”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
我们在vue开发中常常要根据不同的环境区分不同的变量,常见的环境有如下几种:
生产环境:production,
开发环境:development,
测试环境:test。
const BASE_URL = 'http://dlfordmc.org/dev'
const BASE_NAME = 'coder'
// const BASE_URL = 'http://dlfordmc.org/prod'
// const BASE_NAME = 'kobe'
// const BASE_URL = 'http://dlfordmc.org/test'
// const BASE_NAME = 'james'
export { BASE_URL, BASE_NAME }
我们当处于什么环境下,就将什么变量的注释取消。这样做太过于繁琐,并且也不安全。如果我们忘记,当处于生产环境下的,我们使用的是开发环境下的变量,此时就会造成不安全。
let BASE_URL = ''
let BASE_NAME = ''
if (process.env.NODE_ENV === 'production') {
BASE_URL = 'http://dlfordmc.org/prod'
BASE_NAME = 'dmc'
} else if (process.env.NODE_ENV === 'development') {
BASE_URL = 'http://dlfordmc.org/deve'
BASE_NAME = 'dl'
} else {
BASE_URL = 'http://dlfordmc.org/test'
BASE_NAME = 'dlfordmc'
}
export { BASE_NAME, BASE_URL }
需要在根目录下编写三个文件:
.env.development
VUE_APP_BASE_URL=https://fordmcdl.org/devepment
VUE_APP_BASE_NAME=devepmemt
.env.production
VUE_APP_BASE_URL=https://fordmcdl.org/production
VUE_APP_BASE_NAME=production
.env.test
VUE_APP_BASE_URL=https://fordmcdl.org/test
VUE_APP_BASE_NAME=test
此时在其他地方访问的时候
console.log(process.env.VUE_APP_BASE_URL) //https://fordmcdl.org/devepment
console.log(process.env.VUE_APP_BASE_NAME) //devepmemt
注意:此时必须要加上VUE_APP,访问的时候需要加上process.env
官网学习:https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F
假如项目有4个环境:开发、生产、测试、其他
1.package.json
vue脚手架默认有2个环境,开发和生产,在本地环境开发,发布到生产环境,配置如下
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
如果变成4个环境,1个本地开发,3个可发布测试。
首先,我们需要想清楚,我们需要的是什么。
① 需要本地开发,打包到不同环境测试发布;
② 还是开发时就是不同环境,打包也是不同环境
如果是第一种
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js",
//用这种
"build--dev": "cross-env NODE_ENV=production env_config=dev node build/build.js",
"build--test": "cross-env NODE_ENV=production env_config=test node build/build.js",
"build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
//或用这种vue3.0
"build":"vue-cli-service build --mode development",
"prodbuild":"vue-cli-service build --mode production",
"testbuild":"vue-cli-service build --mode test"
},
如果是第二种
"scripts": {
"serve": "vue-cli-service serve --mode development",
"test": "vue-cli-service serve --mode test",
"production": "vue-cli-service serve --mode production" ,
"build":"vue-cli-service build --mode development",
"prodbuild":"vue-cli-service build --mode production",
"testbuild":"vue-cli-service build --mode test"
},
到此,关于“vue中如何区分不同的环境”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。