Vue中如何通过环境变量和插值实现动态数据绑定？

本文共计519个文字，预计阅读时间需要3分钟。

在项目根目录下放置以下文件来指定环境变量：.env

在项目根目录中放置下列文件来指定环境变量：

.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/' : '/', }

public文件夹中 使用插值

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

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