在VueAxios中从.env设置baseURL

Question

我正在使用安装了VueAxios 的标准Vue starer Webpack模板。我想在使用dev命令构建时使用.env变量配置axios 。我在其中设置了所有内容/config/index.js：

const devEnv = require('./dev.env')
module.exports = {
...
    host: devEnv.host || 'localhost',
    port: devEnv.port || 8080,
...
}

然后，dev.env.js在同一目录中定义主机和端口，一切正常。

const dotenv = require('dotenv').config({path: '../.env'})

let host = process.env.VUE_HOST;
let port = +process.env.VUE_PORT;

module.exports = merge(prodEnv, {
    NODE_ENV: '"development"',
    host,
    port
})

但是问题是我无法在src/main.jsVue应用程序中访问主机值。

如果我尝试这样做，我会得到一个错误

vue未定义

import axios from 'axios'
import VueAxios from 'vue-axios'
...
Vue.use(VueAxios, axios)
Vue.axios.defaults.baseURL = `http://${process.env.host}:${process.env.port}`;

尽管端口可以正常工作，但主机不能正常运行并引发错误。

Answer 1

Vue CLI 3的更新

现在VUE_APP_BASE_URL，您只需要在.env文件中进行设置即可。然后您就可以像这样访问它：

process.env.VUE_APP_BASE_URL

但是，更好的解决方案是配置开发服务器。

先前的解决方案

解决方案非常简单：

• 在webpack.dev.conf.js插件中为此情况定义一个特殊变量，请忽略使用process.env该变量。

  new webpack.DefinePlugin({
      'process.env': require('../config/dev.env'),  // You can't use this for baseURL
      'baseURL': JSON.stringify(`http://${HOST || config.dev.host}:${PORT || config.dev.port}`)
  }),
  

• 在这样\src\main.js定义它：

  if (typeof baseURL !== 'undefined')
  {
      Vue.axios.defaults.baseURL = baseURL;
  }