在 VueAxios 中从 .env 设置 baseURL

Question

我正在使用安装了 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 is not defined

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 更新

您现在需要做的就是在 .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;
}

Answer 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

Answer 3

注意只有NODE_ENV、BASE_URL和VUE_APP_开头的变量将使用 webpack.DefinePlugin.

静态嵌入到客户端包中

所以变量名像VUE_APP_HOST

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

在 VueAxios 中从 .env 设置 baseURL

Set baseURL from .env in VueAxios

javascript

webpack

vue.js

axios