在 VueAxios 中从 .env 设置 baseURL答案

【问题标题】：Set baseURL from .env in VueAxios在 VueAxios 中从 .env 设置 baseURL
【发布时间】：2018-06-20 16:15:00
【问题描述】：

我正在使用安装了 VueAxios 的标准 Vue starer webpack template。我想在使用 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
})

但问题是我无法访问我的 Vue 应用程序的 src/main.js 内的主机值。

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

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}`;

虽然端口工作正常，但主机没有并抛出错误。

【问题讨论】：

你导入Vue了吗？
是的，为了简单起见，我只是跳过了那部分。这是一个标准的 vue-cli webpack 模板。

标签： javascript webpack vue.js axios

【解决方案1】：

Vue CLI 3 更新

您现在只需在您的.env 文件中设置VUE_APP_BASE_URL。然后你就可以像这样访问它了：

process.env.VUE_APP_BASE_URL

但更好的解决方案是configure a dev server。

以前的解决方案

解决方法很简单：

在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;
}

【讨论】：

【解决方案2】：

上面的答案对我有帮助。但是我想修改一下。在/src/main.js 中需要定义常量。

例子：

const baseURL = 'http://localhost:8080';
if (typeof baseURL !== 'undefined') {
  Vue.axios.defaults.baseURL = baseURL;
}

也不需要在文件webpack.dev.conf.js 中添加代码。虽然也许这只适合我的问题。

我的问题：Dynamic host in axios

【讨论】：

【解决方案3】：

请注意，只有 NODE_ENV、BASE_URL 和以 VUE_APP_ 开头的变量会通过 webpack.DefinePlugin 静态嵌入到客户端包中。

so 变量名称，如 VUE_APP_HOST

请参考链接：https://cli.vuejs.org/guide/mode-and-env.html#environment-variables

【讨论】：