Question

我似乎无法从feat客户端插件访问process.env.baseUrl变量。该变量返回一个空字符串。我可以在服务器端使用该变量。我可以通过在 nuxt.config.js 中env.baseUrl中对网址进行硬编码来解决此问题，但我不愿意。奇怪的是，它在 prod 和 dev 模式下在Windows 10机器上运行没有任何问题。但是在谷歌云中的Ubuntu vm上它并不起作用。从docker容器运行时它也不起作用。请指教。我错过了一些明显的东西吗？

配置

系统

Ubuntu 16.04.3 LTS
Node 9.4.0

的package.json

{
  "name": "my-app",
  "description": "",
  "version": "0.0.0",
  "main": "src",
  "keywords": [
    "feathers"
  ],
  "contributors": [],
  "bugs": {},
  "directories": {
    "lib": "src",
    "test": "test/"
  },
  "engines": {
    "node": "^8.0.0",
    "npm": ">= 3.0.0"
  },
  "scripts": {
    "build": "nuxt build",
    "dev": "cross-env HOST=localhost PORT=3000 BASE_URL=http://localhost:3000 DEBUG=@feathersjs* nodemon --watch src/ --watch config/ src/index.js",
    "prestart": "npm run build",
    "start": "cross-env HOST=0.0.0.0 PORT=8080 NODE_ENV=production BASE_URL=https://example.com node src/index.js",
    "test": "mocha test/services/",
    "dev-debug": "node --inspect node_modules/.bin/nuxt"
  },
  "dependencies": {
    "@feathersjs/authentication": "^2.1.1",
    "@feathersjs/authentication-jwt": "^1.0.2",
    "@feathersjs/authentication-local": "^1.1.0",
    "@feathersjs/client": "^3.4.0",
    "@feathersjs/configuration": "^1.0.2",
    "@feathersjs/errors": "^3.2.2",
    "@feathersjs/express": "^1.2.0",
    "@feathersjs/feathers": "^3.1.1",
    "@feathersjs/socketio": "^3.2.0",
    "@nuxtjs/axios": "^5.0.1",
    "@nuxtjs/font-awesome": "^1.0.3",
    "@nuxtjs/pwa": "^2.0.5",
    "@sendgrid/mail": "^6.2.1",
    "babel-eslint": "^8.2.1",
    "buefy": "^0.6.3",
    "compression": "^1.7.1",
    "cookie-storage": "^3.1.0",
    "cors": "^2.8.4",
    "feathers-authentication-management": "^2.0.0",
    "feathers-mongodb": "^2.9.1",
    "feathers-stripe": "^0.4.1",
    "feathers-vuex": "^1.1.4",
    "helmet": "^3.10.0",
    "izitoast": "^1.2.0",
    "mongodb": "^3.0.2",
    "node-ses": "^2.1.0",
    "nuxt": "^1.4.0",
    "nuxt-stripe-module": "^2.0.0",
    "pug": "^2.0.0-rc.4",
    "serve-favicon": "^2.4.5",
    "socket.io-client": "^2.0.4",
    "vee-validate": "^2.0.5",
    "vue-bulma-rating": "^1.0.1",
    "vue-no-ssr": "^0.2.2",
    "vue-notifications": "^0.9.0",
    "vue-observe-visibility": "^0.3.1",
    "vue-smoothscroll": "^0.1.1",
    "vue-social-sharing": "^2.3.3",
    "vue-stripe-elements": "^0.2.3",
    "vue2-animate": "^1.0.4",
    "winston": "^2.4.0"
  },
  "devDependencies": {
    "babel-plugin-module-resolver": "^3.1.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "cross-env": "^5.1.3",
    "eslint": "^4.17.0",
    "mocha": "^4.1.0",
    "node-sass": "^4.7.2",
    "nodemon": "^1.14.12",
    "request": "^2.83.0",
    "request-promise": "^4.2.2",
    "sass-loader": "^6.0.6"
  }
}

feathers.js

import feathers from '@feathersjs/client'
import io from 'socket.io-client'
import { CookieStorage } from 'cookie-storage'

console.log('logging in the client')
console.log(process.env.baseUrl)

const socket = io(process.env.baseUrl)


const feathersClient = feathers()
  .configure(feathers.socketio(socket))
  .configure(feathers.authentication({ storage: new CookieStorage() }))

export default feathersClient

nuxt.config.js

const path = require('path');

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
  },
  loading: false,
  loadingIndicator: 'circle',
  plugins: [
    {src: '~plugins/buefy'},
    { src: '~/plugins/vue-observe-visibility' },
    { src: '~/plugins/feathers' },
  ],
  manifest: {
    theme_color: '#3B8070'
  },
  /*
  ** Modules
  */
  modules: [
    '@nuxtjs/pwa'
  ],
  rootDir: path.resolve(__dirname),
  srcDir: path.resolve(__dirname, 'client'),
  dev: process.env.NODE_ENV !== 'production',
  build: {
    vendor: [
      '@feathersjs/client',
      'socket.io-client',
    ],
    postcss: {
      plugins: {
        'postcss-custom-properties': false
      }
    }
  },
  env: {
    baseUrl: process.env.BASE_URL
  }
}

Answer 1

这与nuxt.js无关。它与此无关，无论交叉环境如何，package.json中的环境变量都不会被设置。唯一的选择是从Ubuntu本身的shell中导出环境变量。该应用程序按设计工作。

Answer 2

问题在于您的build和prestart阶段。当你有package.json

以下时

"scripts": {
    "build": "nuxt build",
    "dev": "cross-env HOST=localhost PORT=3000 BASE_URL=http://localhost:3000 DEBUG=@feathersjs* nodemon --watch src/ --watch config/ src/index.js",
    "prestart": "npm run build",
    "start": "cross-env HOST=0.0.0.0 PORT=8080 NODE_ENV=production BASE_URL=https://example.com node src/index.js",
    "test": "mocha test/services/",
    "dev-debug": "node --inspect node_modules/.bin/nuxt"
  },

build和prestart作为独立命令运行，他们将看不到HOST=0.0.0.0 PORT=8080 NODE_ENV=production envs。所以你应该像下面这样做

"scripts": {
    "build": "nuxt build",
    "dev": "cross-env HOST=localhost PORT=3000 BASE_URL=http://localhost:3000 DEBUG=@feathersjs* nodemon --watch src/ --watch config/ src/index.js",
    "prestart": "cross-env HOST=0.0.0.0 PORT=8080 NODE_ENV=production BASE_URL=https://example.com npm run build",
    "start": "cross-env HOST=0.0.0.0 PORT=8080 NODE_ENV=production BASE_URL=https://example.com node src/index.js",
    "test": "mocha test/services/",
    "dev-debug": "node --inspect node_modules/.bin/nuxt"
  },

或使用npm-run-all

在生产模式下访问羽毛客户端插件中的nuxt.js env变量

配置

2 个答案: