Question

我正在使用安装了VueAxios的标准Vue starer webpack template。我想在使用myset命令构建时使用.env变量配置axios。我在dev内设置了所有内容：

/config/index.js

然后我在同一目录中的const devEnv = require('./dev.env') module.exports = { ... host: devEnv.host || 'localhost', port: devEnv.port || 8080, ... }中定义主机和端口，一切正常。

dev.env.js

但问题是我无法在我的Vue应用的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

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

Answer 1

Vue CLI 3的更新

您现在需要做的就是在DataHandler文件中设置VUE_APP_BASE_URL。然后你就可以像这样访问它了：

.env

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

以前的解决方案

解决方案非常简单：

在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
```

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

在VueAxios中从.env设置baseURL

2 个答案: