一、建立.env系列文件
vue项目使用.env文件配置全局环境变量:
- .env 全局默认配置文件,不论什么环境都会加载合并
- .env.development 开发环境
- .env.test 测试环境
- .env.production 生产环境
=========================================================================
文件内容:
注意:属性名必须以VUE_APP_开头,比如VUE_APP_XXX
=========================================================================
关于文件的加载:
根据启动命令vue会自动加载对应的环境,vue是根据文件名进行加载的,所以上面说“不要乱起名,也无需专门控制加载哪个文件”
比如执行npm run serve命令,会自动加载.env.development文件
=========================================================================
启动项目:打印process.env属性(全局属性,任何地方均可使用):
可见NODE_ENV被改为了development,覆盖掉了.env中的全局属性
.env中的全局属性NODE_ENV、VUE_APP_URL被覆盖,
.env中的全局属性VUE_APP_PREVIEW、VUE_APP_DEFAULT_PARAM被保留
二、修改文件
分别在文件内写上:
1.开发环境
//.env.development
VUE_APP_BASE_API = '需要请求API'2.线上环境
//.env.production
VUE_APP_BASE_API = '需要请求API'3.测试环境
//.env.test
VUE_APP_BASE_API = '需要请求API'
三、更改package.json文件
"scripts": {
"dev": "vue-cli-service serve",
"test": "vue-cli-service serve --mode test",
"build": "vue-cli-service build",
"build:test": "vue-cli-service build --mode test",
"lint": "vue-cli-service lint"
},
四、使用
当需要用到该变量是可以用process.env.VUE_APP_BASE_API进行取值
例如:
在js文件中直接使用
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 10000,
})
vue2:
computed: {
VUE_APP_BASE_API(){
return process.env.VUE_APP_BASE_API
}
}
vue3:
import { computed } from 'vue'
export default {
setup() {
const VUE_APP_BASE_API = computed(()=>{
return process.env.VUE_APP_BASE_API
})
return {
VUE_APP_BASE_API
}
}}
vue构造器:var vm = new Vue({
el: "#vue_det",
data: {
site: "云海天教程",
url: "www.yht7.com",
alexa: "10000"
},
methods: {
details: function() {
return this.site + " - 学的不仅是技术,更是梦想!";
}
}
})
Vue 构造器中有一个el 参数,它是 DOM 元素中的 id。在上面实例中 id 为 vue_det,在 div 元素中:<div id = "vue_det"></div>
======================================{{...}}(双大括号)的文本插值: <p>{{ message }}</p>
======================================
v-html 指令用于输出 html 代码:<div v-html="message"></div>
data: {
message: "<h1>云海天教程</h1>"
}<div v-bind:class="{"class1": use}">