1.认识env文件

（1）.env 文件主要的作用是存储环境变量。

（2）.关于env文件的命名规范：必须以“.env”文件名开头

env 全局默认配置文件，不论什么环境都会加载合并

.env.development 开发环境下的配置文件

.env.production 生产环境下的配置文件

.env.test 测试环境下的配置文件

2.env书写要求

属性名以VUE_APP_开头

3.文件的加载

根据启动命令vue会自动加载对应的环境，vue是根据文件名进行加载的，所以说不要乱起名，也无需专门控制加载哪个文件

4.配置当前环境

根目录下新建一个 webpack.config.js 的配置文件

module.exports = {
  mode: 'development'   // mode是你当前的环境
}

5.启动项目

在根目录打开cmd ,输入 $npm run serve 启动项目

6.使用.env文件的变量

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 将从 .env 文件中获取的变量 放在 Vue 原型上
// 因为在 webpack.config.js 中配置的是 development ,所以自动读取 .env.development 文件中的变量
// .env 文件中的变量在 process.env中
Vue.prototype.API_BASE_URL = process.env.VUE_APP_API_BASE_URL

console.log(Vue.prototype)

console.log(process.env)

new Vue({
  render: h => h(App),
}).$mount('#app')

Vue 项目在不同阶段需要部署到不同的环境，比如开发环境（dev）、测试环境（test）、UAT 环境（uat）、生产环境（prod）等，那么如何通过自动化构建工具实现在多环境下自动部署呢？以下列出两种实现方式。

一、方式一：通过 process.env.NODE_ENV 环境变量进行设置

1.定义环境参数

var BASE = {
  /**
   * @description api请求基础路径
   */
  API_DEV: {
    common: "http://192.xx.xx.xx:8890",
    buyer: "http://192.xx.xx.xx:8888",
    manager: "http://192.xx.xx.xx:8887"
  },
  API_UAT: {
    common: "http://124.xx.xx.xx:8890",
    buyer: "http://124.xx.xx.xx:8888",
    manager: "http://124.xx.xx.xx:8887"
  },
  API_PROD: {
    common: "http://129.xx.xx.xx:8890",
    buyer: "http://129.xx.xx.xx:8888",
    manager: "http://129.xx.xx.xx:8887"
  },
};

2.编写 js 文件，对环境进行判断

// api地址
export const buyerUrl =
  process.env.NODE_ENV === 'development'
    ? BASE.API_DEV.buyer
    : ( process.env.NODE_ENV === 'uat' ? BASE.API_UAT.buyer : BASE.API_PROD.buyer );
export const commonUrl =
  process.env.NODE_ENV === 'development'
    ? BASE.API_DEV.common
    : ( process.env.NODE_ENV === 'uat' ? BASE.API_UAT.common : BASE.API_PROD.common );
export const managerUrl =
  process.env.NODE_ENV === 'development'
    ? BASE.API_DEV.manager
    : ( process.env.NODE_ENV === 'uat' ? BASE.API_UAT.manager : BASE.API_PROD.manager );

3.部署服务器上设置环境变量

export NODE_ENV=development #开发环境
export NODE_ENV=uat #UAT环境
export NODE_ENV=production #生产环境

二、方式二：通过指定编译参数进行设置

1.配置 .env 文件

分别创建 .env.development、.env.uat、.env.prod 三个配置文件，与 package.json 同级：

（1）.env.development

NODE_ENV=development
VUE_APP_API_BASE_URL=http://192.xx.xx.xx:8088

（2）.env.uat

NODE_ENV=uat
VUE_APP_API_BASE_URL=http://124.xx.xx.xx:8088

（3）.env.prod

NODE_ENV=prod
VUE_APP_API_BASE_URL=http://129.xx.xx.xx:8088

2.修改 package.json 文件

  "scripts": {
    "dev": "vue-cli-service serve",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:dev": "vue-cli-service build --mode development",
    "build:uat": "vue-cli-service build --mode uat",
    "build:prod": "vue-cli-service build --mode prod",
    "lint": "vue-cli-service lint"
  },

3.编译打包

npm install cross-env -g && npm install && npm run build:uat

以下大多数内容在你使用 Vue CLI 时都是默认开启的。该章节仅跟你自定义的构建设置有关。

开启生产环境模式

  开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下，这些警告语句却没有用，反而会增加应用的体积。此外，有些警告检查还有一些小的运行时开销，这在生产环境模式下是可以避免的。

不使用构建工具

  如果用 Vue 完整独立版本，即直接用 <script> 元素引入 Vue 而不提前进行构建，请记得在生产环境下使用压缩后的版本 (vue.min.js)。两种版本都可以在安装指导中找到。

使用构建工具

  当使用 webpack 或 Browserify 类似的构建工具时，Vue 源码会根据 process.env.NODE_ENV 决定是否启用生产环境模式，默认情况为开发环境模式。在 webpack 与 Browserify 中都有方法来覆盖此变量，以启用 Vue 的生产环境模式，同时在构建过程中警告语句也会被压缩工具去除。所有这些在 vue-cli 模板中都预先配置好了，但了解一下怎样配置会更好。

webpack
在 webpack 4+ 中，你可以使用 mode 选项：

module.exports = {
  mode: 'production'
}

但是在 webpack 3 及其更低版本中，你需要使用 DefinePlugin：

var webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}

Browserify

• 在运行打包命令时将 NODE_ENV 设置为 "production"。这等于告诉 vueify 避免引入热重载和开发相关的代码。
• 对打包后的文件进行一次全局的 envify 转换。这使得压缩工具能清除掉 Vue 源码中所有用环境变量条件包裹起来的警告语句。

例如：

NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

• 或者在 Gulp 中使用 envify：

// 使用 envify 的自定义模块来定制环境变量
var envify = require('envify/custom')

browserify(browserifyOptions)
  .transform(vueify)
  .transform(
    // 必填项，以处理 node_modules 里的文件
    { global: true },
    envify({ NODE_ENV: 'production' })
  )

或者配合 Grunt 和 grunt-browserify 使用 envify：

// 使用 envify 自定义模块指定环境变量
var envify = require('envify/custom')

browserify: {
  dist: {
    options: {
        // 该函数用来调整 grunt-browserify 的默认指令
        configure: b => b
        .transform('vueify')
        .transform(
            // 用来处理 `node_modules` 文件
          { global: true },
          envify({ NODE_ENV: 'production' })
        )
        .bundle()
    }
  }
}

Rollup
使用 rollup-plugin-replace：

const replace = require('rollup-plugin-replace')
rollup({
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify( 'production' )
    })
  ]
}).then(...)

模板预编译

  当使用 DOM 内模板或 JavaScript 内的字符串模板时，模板会在运行时被编译为渲染函数。通常情况下这个过程已经足够快了，但对性能敏感的应用还是最好避免这种用法。

  预编译模板最简单的方式就是使用单文件组件——相关的构建设置会自动把预编译处理好，所以构建好的代码已经包含了编译出来的渲染函数而不是原始的模板字符串。

  如果你使用 webpack，并且喜欢分离 JavaScript 和模板文件，你可以使用 vue-template-loader，它也可以在构建过程中把模板文件转换成为 JavaScript 渲染函数。

提取组件的 CSS

  当使用单文件组件时，组件内的 CSS 会以 <style> 标签的方式通过 JavaScript 动态注入。这有一些小小的运行时开销，如果你使用服务端渲染，这会导致一段“无样式内容闪烁 (fouc)”。将所有组件的 CSS 提取到同一个文件可以避免这个问题，也会让 CSS 更好地进行压缩和缓存。

跟踪运行时错误

  如果在组件渲染时出现运行错误，错误将会被传递至全局 Vue.config.errorHandler 配置函数 (如果已设置)。利用这个钩子函数来配合错误跟踪服务是个不错的主意。