Vue.js如何在主index.html文件中插入$符号且不引发构建错误？

错误根本原因：Vue CLI 依赖的 html-webpack-plugin 默认使用 Lodash 模板语法解析 index.html，${变量名}是默认的插值语法，当插件找不到对应的变量定义时就会抛出错误中断构建。

方法1：转义$符号（无需修改配置，适合少量使用${}的场景） #

给需要原样输出的$前添加反斜杠转义即可，修改index.html对应代码：

<input value="\${name}"/>

构建完成后转义符会被自动移除，最终页面渲染的内容就是你需要的${name}字符串。

方法2：修改模板插值分隔符（适合项目中存在大量原生${}内容的场景） #

在项目根目录下修改或新建vue.config.js文件，添加如下配置修改默认的模板插值规则，避免解析${}格式内容：

module.exports = {
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      // 自定义插值分隔符为<%%>格式，不会和原生${}冲突
      args[0].templateParameters = {
        interpolate: /<%=([\s\S]+?)%>/g,
        evaluate: /<%([\s\S]+?)%>/g,
        escape: /<%-([\s\S]+?)%>/g
      }
      return args
    })
  }
}

修改配置后重新执行npm run build即可正常构建。

方法3：如果${name}是需要动态注入的变量 #

直接在vue.config.js的html插件配置中声明对应变量的值，构建时会自动完成替换：

module.exports = {
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      // 声明变量name的实际值
      args[0].name = '你需要填充的实际内容'
      return args
    })
  }
}

内容的提问来源于stack exchange，提问作者Michael Joseph Jackson