Syntax error when I access the "process.env" on Vue.js - node.js

Question

I got a problem when I try to access the variable:process.env. It told me I got a syntax error and I'm 100% sure that my code is correct.
I want to know what problem with it
I tried check my codes over and over again. I can't find any syntax error.By the way, it's ok when I access the proceess varible. But when I try to access the process.env, it started to execute eval, which raised the error I mentioned before.
My code goes that :
src/global.vue
console.log(process.env);
The error I got:
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)
The app.js:1170 goes that:
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");
I solve it by adding double quotes on the value of the variable SERVER:
Old code
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
SERVER: 'http://localhost:8000'
})
New code
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
SERVER: '"http://localhost:8000"'
})
I don't know why it has no hint to tell me that thing. The grammar of config file is so weird that you need to put a quote outside an existed quote.
Can anyone tell me why?

Answer 1

After instpecting the error in app.js:1170 one can see that your process.env.serversomehow misses " - why that is no clue but i think this should be fixable now^^
currently:
{server: http://localhost:8000}
but should be
{server:"http://localhost:8000"}

Answer 2

I had a similar problem when working in a project with webpack, I made a configuration of the .env to node and to the test environment, but when running in the web environment, this same error message, as if the process. envdid not exist. In my case I was using the dotenv lib, so it was pretty simple to solve, I just saw that theJSON.stringifysetting inDefinePlugin` was missing.
Resolved configuring it this way:
new webpack.DefinePlugin({
"process.env": JSON.stringify(dotenv.parsed),
})