我使用的是标准 Vue starer webpack template安装了 VueAxios。我想在使用 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}`;
虽然端口工作正常,但主机不工作并抛出错误。
最佳答案
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; }
关于javascript - 在 VueAxios 中从 .env 设置 baseURL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48205273/