Vue.js：使用webpack.DefinePlugin（）时出现“无效或意外的令牌”

Question

老实说..我对节点和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的部分，但我认为它就像这样（在component或store.js中）：

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

Answer 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")
  }
})