时间戳

首页 > 解决方案 > 访问 Vue.js 上的“process.env”时出现语法错误

node.js - 访问 Vue.js 上的“process.env”时出现语法错误

问题描述

当我尝试访问变量：process.env 时遇到问题。它告诉我我有一个语法错误，我 100% 确定我的代码是正确的。我想知道它有什么问题

我试图一遍又一遍地检查我的代码。我找不到任何语法错误。顺便说一句，我访问proceess变量时没问题。但是当我尝试访问 process.env 时，它开始执行eval，这引发了我之前提到的错误。

我的代码是这样的：

src/global.vue

console.log(process.env);

我得到的错误：


Uncaught SyntaxError: Unexpected token :
    at Object../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue (app.js:1170)
    at __webpack_require__ (app.js:679)
    at fn (app.js:89)
    at eval (App.vue?9e04:1)
    at Object../src/App.vue (app.js:5245)
    at __webpack_require__ (app.js:679)
    at fn (app.js:89)
    at eval (main.js:5)
    at Object../src/main.js (app.js:5357)
    at __webpack_require__ (app.js:679)

app.js:1170 是这样的：

eval("/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_headers__ = __webpack_require__(\"./src/components/headers.vue\");\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__components_blogfooter__ = __webpack_require__(\"./src/components/blogfooter.vue\");\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n// import axios from 'axios'\n\n\n/* harmony default export */ __webpack_exports__[\"a\"] = ({\n  name: 'App',\n  components: { 'headers': __WEBPACK_IMPORTED_MODULE_0__components_headers__[\"a\" /* default */],\n    'blog-footer': __WEBPACK_IMPORTED_MODULE_1__components_blogfooter__[\"a\" /* default */]\n  },\n  created: function created() {\n    this.$store.dispatch('GET_BASIC');\n    console.log(Object({\"NODE_ENV\":\"development\",\"SERVER\":http://localhost:8000}));\n  }\n});//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvYmFiZWwtbG9hZGVyL2xpYi9pbmRleC5qcyEuL25vZGVfbW9kdWxlcy92dWUtbG9hZGVyL2xpYi9zZWxlY3Rvci5qcz90eXBlPXNjcmlwdCZpbmRleD0wIS4vc3JjL0FwcC52dWUuanMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vQXBwLnZ1ZT8yNmNkIl0sInNvdXJjZXNDb250ZW50IjpbIjx0ZW1wbGF0ZT5cbiAgPGRpdj5cbiAgICA8ZGl2IGNsYXNzPVwid3JhcFwiPlxuICAgICAgPGhlYWRlcnM+PC9oZWFkZXJzPlxuICAgICAgPHRyYW5zaXRpb24+XG4gICAgICAgIDxyb3V0ZXItdmlldz48L3JvdXRlci12aWV3PlxuICAgICAgPC90cmFuc2l0aW9uPlxuICAgICAgPGJsb2ctZm9vdGVyPjwvYmxvZy1mb290ZXI+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC90ZW1wbGF0ZT5cblxuPHNjcmlwdD5cbiAgLy8gaW1wb3J0IGF4aW9zIGZyb20gJ2F4aW9zJ1xuICBpbXBvcnQgSGVhZGVycyBmcm9tICdAL2NvbXBvbmVudHMvaGVhZGVycydcbiAgaW1wb3J0IEZvb3RlciBmcm9tICdAL2NvbXBvbmVudHMvYmxvZ2Zvb3RlcidcbiAgZXhwb3J0IGRlZmF1bHQge1xuICAgIG5hbWU6ICdBcHAnLFxuICAgIGNvbXBvbmVudHM6eydoZWFkZXJzJzpIZWFkZXJzLFxuICAgICAgICAgICAgICAgICdibG9nLWZvb3Rlcic6Rm9vdGVyXG4gICAgfSxcbiAgICBjcmVhdGVkICgpIHtcbiAgICAgIHRoaXMuJHN0b3JlLmRpc3BhdGNoKCdHRVRfQkFTSUMnKTtcbiAgICAgIGNvbnNvbGUubG9nKHByb2Nlc3MuZW52KVxuICAgIH0sXG4gIH1cblxuPC9zY3JpcHQ+XG5cbjxzdHlsZT5cblxuPC9zdHlsZT5cblxuXG5cbi8vIFdFQlBBQ0sgRk9PVEVSIC8vXG4vLyBBcHAudnVlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7QUFhQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQURBO0FBR0E7QUFDQTtBQUNBO0FBQ0E7QUFSQSIsInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue\n");

我通过在变量 SERVER 的值上添加双引号来解决它：

旧代码

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  SERVER: 'http://localhost:8000'
})

新代码

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  SERVER: '"http://localhost:8000"'
})

我不知道为什么它没有提示告诉我那件事。配置文件的语法很奇怪，你需要在现有的引用之外加上一个引用。

谁能告诉我为什么？

标签： node.jsvue.jswebpack

解决方案

在检查 app.js:1170 中的错误后，可以看到您process.env.server以某种方式错过了“ - 为什么这不是线索，但我认为这现在应该可以修复了^^

目前：

{server: http://localhost:8000}

但应该是

{server:"http://localhost:8000"}

推荐阅读