前端VUE

VUE创建

安装脚手架
npm install --global vue-cli

vue不是内部命令问题
npm config list 找到vue.cmd
链接: link.

安装sass

先安装node-sass
npm install node-sass
npm uninstall sass-loader（卸载当前版本）
npm install sass-loader@7.0.3 --save-dev

{//build/webpack.base.conf.js
   test: /.sass$/,
   loaders: ['style', 'css', 'sass']
},

更改webpack版本 npm i webpack@3.6.0

配置全局样式
npm i sass-resources-loader --save
修改vue-cli环境下build文件夹下utils.js，找到scss加载位置：

return {//修改前
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
  //修改后
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass').concat({
      loader: 'sass-resources-loader', // 为了scss全局变量能在vue文件中使用
      options: {
        resources: path.resolve(__dirname, './../src/common/globalStyle.scss')
      }
    }),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

//globalStyle.scss
$info-color: rgb(206, 165, 29);
$success-color: rgb(61, 231, 70);

MVC 和 MVVM

MVC

MVC 全名是 Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范

• Model（模型）：是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据
• View（视图）：是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的
• Controller（控制器）：是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据

MVC 的思想：一句话描述就是 Controller 负责将 Model 的数据用 View 显示出来，换句话说就是在 Controller 里面把 Model 的数据赋值给 View。

MVVM

MVVM 新增了 VM 类

• ViewModel 层：做了两件事达到了数据的双向绑定一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM事件监听。

MVVM 与 MVC 最大的区别就是：它实现了 View 和 Model 的自动同步，也就是当 Model 的属性改变时，我们不用再自己手动操作 Dom 元素，来改变 View 的显示，而是改变属性后该属性对应 View 层显示会自动改变（对应Vue数据驱动的思想）

整体看来，MVVM 比 MVC 精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作 DOM 元素。因为在 MVVM 中，View 不知道 Model 的存在，Model 和 ViewModel 也观察不到 View，这种低耦合模式提高代码的可重用性
链接: link.

语法糖

v-bind缩写为：“：”
v-on缩写为： “@”

vue中的data为什么是个函数

类别引用数据类型
Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了；而用函数返回一个对象则可以让对象存于不同地址，让每个组件互相管理自己的数据

JavaScript只有函数构成作用域(注意理解作用域，只有函数{}构成作用域,对象的{}以及if(){}都不构成作用域),data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。

provide/inject及其它组件通信

在provide中指定要传递给子孙组件的数据，子孙组件通过inject注入祖父组件传递过来的数据。

//父组件
provide () { return { globleApp: this.globleApp } }, // 全局APP共享数据，所有子组件都能仿问
//子组件
inject: ['globleApp'],

拓展
组件通信，除上例还有其它方式。

1、props/$emit

子组件接收props:{ }

子组件传递：this.$emit(“titleChanged”,“子向父组件传值”)
父组件接收：@titleChanged=“updateTitle”

2、$emit/$on

这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级
$on 监听了自定义事件 data-a和data-b，因为有时不确定何时会触发事件，一般会在 mounted 或 created 钩子中来监听。

//定义一个文件
import Vue from 'vue'
const gcustEvtVm = new Vue() // 新建一个vue管理所有自定义事件
export default {
  custEvtVm: gcustEvtVm
} 
//发送
import customEvent from '../class/customEvent'
customEvent.custEvtVm.$emit('AREAS-ALL', pagethis.apidata.areas)
//接收
import customEvent from '../class/customEvent'
customEvent.custEvtVm.$on('AREAS-ALL',
       (areList)=> {
       let rcvareatemp = areList
       })

3、VUEX

Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数据时，必须通过Mutation进行，Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走Action，但Action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上。

4、$attrs/$listeners

• $attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。
• $listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

//子组件一
<child-com2 v-bind="$attrs"></child-com2>
inheritAttrs: false, // 可以关闭自动挂载到组件根元素上的没有在props声明的属性
props: {
  foo: String // foo作为props属性绑定
},
created() {  //此时除去父组件传到该组件的foo值
  console.log(this.$attrs); // { "boo": "Html", "coo": "CSS", "doo": "Vue", "title": "前端工匠" }
}
//子组件二
<child-com3 v-bind="$attrs"></child-com3>
inheritAttrs: false,
props: {
  boo: String
},
created() {  //此时可传递的值已除去boo
  console.log(this.$attrs); // {"coo": "CSS", "doo": "Vue", "title": "前端工匠" }
}

简单来说：$attrs与$listeners 是两个对象，
$attrs 里存放的是父组件中绑定的非 Props 属性，
$listeners里存放的是父组件中绑定的非原生事件。

5、$parent / $children与 ref

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

//父组件  comA为指向子组件
<component-a ref="comA"></component-a>
const comA = this.$refs.comA;
console.log(comA.title);  // Vue.js
comA.sayHello();  // 弹窗

this.$parent //访问父组件的所有数据
this.$children //访问子组件的所有数据

拓展：$root访问根组件数据

nextTick

vue更新dom是异步的，有数据变化时，vue会开启一个异步任务队列，视图将会等数据变化完成后，统一更新。这个时候dom是最新的，这个函数就在这个时候调用。
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。this.$nextTick(function () {})

异步执行的运行机制如下。

1. 所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
2. 主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
3. 一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
4. 主线程不断重复上面的第三步。

//改变数据
vm.message = 'changed'

//想要立即使用更新后的DOM。这样不行，因为设置message后DOM还没有更新
console.log(vm.$el.textContent) // 并不会得到'changed'

//这样可以，nextTick里面的代码会在DOM更新后执行
Vue.nextTick(function(){
    console.log(vm.$el.textContent) //可以得到'changed'
})

链接: link.

添加class名

<div :class="classA ? 'class-a' : 'class-b' ">Demo3</div>

链接: link.

$set和$delete

vm.$set(object,key,value)
vm.$delete(object,key)
vm.$watch(data,callback[,options])

hasOwnProperty

Object的hasOwnProperty()方法返回一个布尔值，判断对象是否包含特定的自身（非继承）属性。

if (element.hasOwnProperty("net_id")) {
  this.net_id_list.push(element["net_id"]);
}

window.location.href

http://hotekey.cn:3000/login

window.location.href = '/login' // 跳转到login 页

click.stop

@click.stop 阻止事件冒泡
@click.prevent 阻止事件的默认行为，

<button @click.stop="doThis">阻止单击事件继续传播</button>

JSON.parse()和JSON.stringify()

parse()
用于从一个字符串中解析出json对象
如:
var str = ‘{“name”:“huangxiaojian”,“age”:“23”}’
结果：
JSON.parse(str)
Object
age: “23"
name: “huangxiaojian"
__proto__: Object

stringify()
用于从一个对象解析出字符串
如:
var a = {a:1,b:2}
结果：
JSON.stringify(a)
"{“a”:1,“b”:2}”

字符串转换为布尔值

Boolean(""); //输出为：false
Boolean(null); //输出为：false
Boolean(0); //输出为：false
Boolean(“hi”); //输出为：true
Boolean(100); //输出为：true
Boolean(new Object()); //输出为：true

$router.push

1. 想要导航到不同的URL，使用router.push()方法，这个方法会向history栈添加一个新纪录，所以，当用户点击浏览器后退按钮时，会回到之前的URL
2. 当点击 时，这个方法会在内部调用，即点击 等同于调用
   router.push(…)

<img src="../assets/buttonback.svg" alt="back" @click="$router.push({ name: 'Allrooms' })" />

链接: link.

keep-alive

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

props

• include - 字符串或正则表达，只有匹配的组件会被缓存
• exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

// 组件 a
export default {
  name: 'a',
  data () {
    return {}
  }
}

<keep-alive include="a">
  <component>
    <!-- name 为 a 的组件将被缓存！ -->
  </component>
</keep-alive>可以保留它的状态或避免重新渲染

<keep-alive exclude="a">
  <component>
    <!-- 除了 name 为 a 的组件都将被缓存！ -->
  </component>
</keep-alive>可以保留它的状态或避免重新渲染

for 循环里的v-show

可以用 show:[]
v-show=“show[index]”

@comfirm="($event,value)"

在子组件中通过$emit注册事件，将数据作为参数传入，在父组件中通过$event接收

vendor.js和app.js文件过大（懒加载）

• 去除不必要的插件，删除不必要的代码
• 开启gzip压缩
• 打包的时候不生成map文件
• 分离vendor
• 懒加载

链接: link.

router与route区别

$router.push({path:‘home’});本质是向history栈中添加一个路由，在我们看来是 切换路由，但本质是在添加一个history记录， $router对象是全局路由的实例，是router构造方法的实例。

$route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

链接: link.

双向绑定

Vue是采用数据劫持结合发布/订阅模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

关于VUE双向数据绑定，其核心是Object.defineProperty()方法；
链接: link.

export、export default、import

链接: link.

单页面应用和多页面应用区别

多页应用
每一次页面跳转的时候，后台服务器都会给返回一个新的html文档，这种类型的网站也就是多页网站，也叫做多页应用。

单页应用
第一次进入页面的时候会请求一个html文件，刷新清除一下。切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容也变化了。
链接: link.

路由

改变url,但页面不会整体的刷新

route和router的区别

• router为VueRouter的实例，可以导航到不同url
• route为当前活跃的路由对象，包含当前路由的信息，name、path、query、params等

路由的跳转方式

1. <router-link to="/home">跳转
2. this.$router.push(’/home’)
3. this.$router.replace(’/home’) //不可以返回上一页

路由守卫

用于对路由进行权限控制，用于判断是否有某个值决定是否调用next()放行
监听路由跳转的过程，当路由发生跳转做出相应的动作

$router.beforeEach((to, from, next) => {
  //从from跳转到to
  document.title = to.matched[0].meta.title
  next()
})

改变路径的两种方式
url的hash

虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面
hash的而传参是基于url的，如果要传递复杂的数据，会有体积的限制
hash模式下，仅hash符号之前的内容会被包含在请求中，如 http://www.abc.com 因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误；

location.hash = ‘aaa’
url/#/aaa

HTML的history

提供了对历史纪录进行修改的功能，只是当他们执行修改使，虽然改变了当前的url，但你的浏览器不会立即像后端发送请求
history模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中
history模式下，请求服务器的时候发送一整条url，前端的url必须和实际后端发起请求的url一致，如http://www.abc.com/book/id 。如果后端缺少对/book/id 的路由处理，将返回404错误

压入栈，先进后出
history.putState({},’’,‘about’)
.go(-2)跳转到某一个
.back()返回上一个
url/about

链接: link.

路由重复点击报错问题

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld.vue'

Vue.use(Router)
//解决路由跳转原路由或者刷新出错
const originalReplace = Router.prototype.replace;
Router.prototype.replace = function replace(location) {
    return originalReplace.call(this, location).catch(err => err);
};
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}
export default new Router({
  routes: [
    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: resolve => require(['@/components/HelloWorld'],resolve)
    },
    {
      path: '/sdMap',
      name: 'sdMap',
      component: resolve => require(['@/view/sdMap/index'],resolve)
    },
  ],
  mode: 'history' //设置路由模式
})

路由懒加载

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: resolve => require(['@/components/HelloWorld.vue'],resolve)
    }
  ]
})

生命周期

Vue 的父组件和子组件生命周期钩子函数执行顺序

加载渲染过程
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

子组件更新过程
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父组件更新过程
父 beforeUpdate -> 父 updated

销毁过程
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

created和mounted的不同

• 在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素
• 而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

安装vuex
npm install vuex --save
创建文件 store/index.js

//main.js
import store from './store'
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})
//store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    counter: 1000
  },
  mutations: {
    //方法
    increment(state) {
      state.counter++
    },
    decrement(stete) {
      state.counter--
    }
  },
  actions: { },
  getters: {},
  modules: { },
})
export default store

State
vuex.store的实例中state保存数据

//使用
$store.state.counter

getters
对state中的数据进行数据处理

//使用
getters: {

}

mutations
用来同步改变state中的数据，第一个参数就是传state进去，因为每一条 mutation 被记录，devtools 都需要捕捉到前一状态和后一状态的快照，因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的

actions
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

modules
允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

axios

• 在浏览器中发送XMLHttpRequests请求
• 在node.js中发送http请求
• 支持Promis API
• 拦截请求和响应
• 转换请求和相应数据

基础用法

import axios from 'axios'
//基本使用
axios({
  url: 'httpbin.org',
  // method: 'get',
  params: { //get传参
    type: 'pop',
    page:1
  }
}).then( res => {
  console.log(res)
})

//并发请求
axios.all([
  axios.get('http://123.32:8000'),
  axios.get('http://123.32:8000',
  {params:{type: 'sell',page:1}})
]).then(axios.spread( (res1, res2) => {
  console.log(res1)
  console.log(res2)
}))

可设置全局配置
axios.defaults.baseURL = ‘http://123.32:8000’
axios.defaults.timeout = 1000

//设置各个配置请求
const instance1 = axios.create({
  baseURL: 'http://222.32:8000',
  timeout:1000
})
instance1({
  url: '/home/data',
  params: {
    type: 'pop',
    page:1
  }
}).then( res => {
  console.log(res)
})

const instance2 = axios.create({
  baseURL: 'http://222.32:8000',
  timeout: 2000
})

axios常见的配置选项

• 请求地址 url: ‘/user’
• 请求类型 method: ‘get’
• 请根路径 baseURL: ‘http://www.mt.com’
• 请求前的数据处理 transformRequest:[function(data){}]
• 请求后的数据处理 transformResponse: [function(data){}]
• 自定义的请求头 headers:{‘x-Requested-With’:‘XMLHttpRequest’}
• URL查询对象 params{id:12}
• request body data:{key:‘aa’}
• 设置超时 timeout:1000
• 跨域是否带Token withCredentials:false
• 自定义请求处理 adapter:function(resolve,reject,config){}
• 身份验证信息 auth:{uname:’’,pwd:12}
• 响应式的数据格式json/blob/textarraybuffer responseType:‘json’

封装请求

基本使用

//  network/request.js
import axios from 'axios'
export function request() {
  //创建axios的实例
  const instance = axios.create({
    baseURL: 'http://123.23:8000',
    timeout: 5000
  })

  //发送真正的网络请求
  instance(config)
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.log(err)
  })
}
//使用
//封装request模块
import {request} from "./network/request"
request({
  url: '/home/multitdata'
},res =>{
  console.log(res)
}, err => {
  console.log(err)
})

//promise方式
export function request() {
  return new Promise((resolve, reject) => {
    //创建axios的实例
    const instance = axios.create({
      baseURL: 'http://123.23:8000',
      timeout: 5000
    })

    //发送真正的网络请求
    instance(config)
    .then(res => {
      resolve(res)
    })
    .catch(err => {
      reject(err)
    })
  })
}
//使用
request({
  url: '/home/multfdata'
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

//最简洁方式
export function request() {
  //创建axios的实例
  const instance = axios.create({
    baseURL: 'http://123.23:8000',
    timeout: 5000
  })

  //发送真正的网络请求
  return instance(config) //返回的这个也是promise
}

axios拦截器

interceptors 拦截器

//instance  axios的实例
//拦截请求成功、失败
instance.interceptors.request.use(config => {
    console.log(config)
    return config; //把config返回出去
  },err => {
    console.log(err)
  })

//拦截相应成功、失败
  instance.interceptors.response.use(res => {
    console.log(res)
    return res.data; //把config返回出去
  },err => {
    console.log(err)
  })

vuex缓存

实际使用时当vuex值变化时，F5刷新页面，vuex数据重置为初始状态，所以还是要用到localStorage或sessionStorage或cookie

created(){
    //在页面加载时读取localStorage里的状态信息
    localStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userMsg"))));
    
    //在页面刷新时将vuex里的信息保存到localStorage里
    window.addEventListener("beforeunload",()=>{
        localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
    })
  }

vue组件权限选择

首先从store仓库中获取当前登录用户的角色，判断如果使用该组件的权限如果不包括在当前登录人的权限中 就利用父元素删除该元素。

export default {
 // 组件级权限控制
  hasRole: {
    inserted: function (el, binding) {
      // 当前登录人角色
      const roles = store.state.userInfo.roles || ['user']
 
      // 使用该组件的权限如果不包括在当前登录人的权限中 就利用父元素删除该元素
      if (!roles.includes(binding.value)) {
        el.parentNode.removeChild(el)
      }
    }
  },

Vue.directive("fontsize",function(el,binding){
    console.log(typeof(binding.value),binding);
    el.style.fontSize = binding.value + "px";
})

<template>
  <div v-hasRole="'admin'">
    hello
  </div>
</template>
 
<script>
</script>

双向绑定原理

数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的

vue的data里的数据属性会有get和set两个方法，是因为vue是通过Object.defineProperty()来实现数据劫持的，用这两个方面进行数据改变的后的相应操作，然后vue会有个监听器，用来劫持并监听所以属性，如果变动就通知订阅者，收到属性变化就会执行相应的函数，从而更新视图

computed和watch

computed : 计算属性
要计算的属性会随着其依赖的data中属性变化而变化，只要依赖的属性改变，就会执行computed，若无改变，则直接从缓存中取值

支持缓存，只有依赖数据发生改变，才会重新进行计算

不支持异步，当computed内有异步操作时无效，无法监听数据的变化

computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值

如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed

如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

watch：侦听属性
不支持缓存，数据变，直接会触发相应的操作；

watch支持异步；

监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

当一个属性发生变化时，需要执行对应的操作；一对多；

监听的是这个属性自身的变化，且不会操作缓存

监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，

immediate：组件加载立即触发回调函数执行，

deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。

vue的filter过滤器

vue中的过滤器分为两种：局部过滤器和全局过滤器，filter为全局，filters为局部

<div id="app">
     <p>{{ msg | msgFormat('疯狂','--')}}</p>
 </div>

  <script>
      // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
      Vue.filter('msgFormat', function(msg, arg, arg2) {
          // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
       return msg.replace(/单纯/g, arg+arg2)
   })
   </script>

.env文件

.env 全局默认配置文件，不论什么环境都会加载合并
.env.development 开发环境下的配置文件
.env.production 生产环境下的配置文件

//.env文件
# 页面标题
VUE_APP_TITLE = 若依管理系统
# 开发环境配置
ENV = 'development'
# 若依管理系统/开发环境
VUE_APP_BASE_API = '/dev-api'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true
//使用文件
console.log(process.env.VUE_APP_BASE_API)//获取env文件内的变量

链接: link.