Vue中使用环境变量和插值

 .env                # 在所有的环境中被载入
 .env.local          # 在所有的环境中被载入，但会被 git 忽略
 .env.[mode]         # 只在指定的模式中被载入
 .env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

• 一个环境文件只包含环境变量的“键=值”对：VUE_APP_NOT_SECRET_CODE=some_value。

• 请注意，只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。

• 代码中访问变量例如console.log(process.env.VUE_APP_HELLO)。

• 也可以再vue.config.js中设置环境变量

  // vue.config.js
  process.env.VUE_APP_VERSION = require('./package.jon').version;
  

• 除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：

  • NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式（可以不用设置）。
  • BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。

  // vue.config.js
  Module.exports = {
    publicPath: process.env.NODE_ENV !== "development" ? '/pollution-ses/' : '/',
  }
  

• <%= VALUE %> 用来做不转义插值；
• <%- VALUE %> 用来做 HTML 转义插值；
• <% expression %> 用来描述 JavaScript 流程控制。
• 除了被 html-webpack-plugin 暴露的默认值之外，所有客户端环境变量也可以直接使用。例如，BASE_URL 的用法：

<!-- index.html 设置网页页签图标 -->
<link rel="ico" href="<% =BASE_URL %>favicon.ico"></link>