Vue.js：使用 webpack.DefinePlugin() 时出现“无效或意外令牌”答案

【问题标题】：Vue.js : "Invalid or unexpected token" when using webpack.DefinePlugin()Vue.js：使用 webpack.DefinePlugin() 时出现“无效或意外令牌”
【发布时间】：2018-03-01 21:42:15
【问题描述】：

老实说..我对 node 和 process.env 的东西有点陌生..对于我要问的问题可能有一个非常好的解释，但我还没有找到它..

任务：

将用户名和密码存储在 env.js 文件中，以便我可以检查我的 store.js 文件中的用户名和密码...

目前的做法：

webpack.base.conf.js

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
var webpack = require('webpack');

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        loginEmail: "xxxxx",
        loginPw: "xxxxxx"
      }
    })
  ],
.... rest is default/unchanged

错误：

我还没有真正访问 process.env.loginEmail 的部分，但我认为它是这样的（在组件或 store.js 中）：

console.log("Process listings ==>")
console.log("loginEmail : " + process.env.loginEmail)

【问题讨论】：

您必须将字符串用附加（交替）引号括起来或使用JSON.stringify：查看文档中的蓝色提示：webpack.js.org/plugins/define-plugin
马上检查 :) 让你在一分钟内发布...
神奇地工作！.. 很乐意接受这个作为正确答案，所以如果你提出一个答案，我会:)

标签： javascript node.js vue.js vuejs2 webkit

【解决方案1】：

来自DefinePlugin docs：

请注意，由于插件会直接替换文本，因此该值赋予它的字符串本身必须包含 实际引号。通常，这可以使用备用引号来完成，例如 '"production"'，或使用JSON.stringify('production')。

因此，将您的代码更改为：

new webpack.DefinePlugin({
  'process.env': {
    loginEmail: "'xxxxx'",
    loginPw: "'xxxxxx'"
  }
})

或

new webpack.DefinePlugin({
  'process.env': {
    loginEmail: JSON.stringify("xxxxx"),
    loginPw: JSON.stringify("xxxxxx")
  }
})

【讨论】：