javascript 在 VueAxios 中从 .env 设置 baseURL
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48205273/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set baseURL from .env in VueAxios
提问by CyberAP
I am using a standard Vue starer webpack templatewith VueAxios installed. I want to configure axios using .env variable when building with devcommand. I have everything set up within /config/index.js:
我正在使用安装了 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,
...
}
Then I define my host and port in dev.env.jsin the same directory and it all works fine.
然后我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
})
But the problem is that I can't access host value within src/main.jsof my Vue app.
但问题是我无法在src/main.js我的 Vue 应用程序中访问主机值。
If I try to do it like this I get an error that
如果我尝试这样做，我会收到一个错误
vue is not defined
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}`;
Though the port works fine, the host does not and throws an error.
虽然端口工作正常，但主机没有并抛出错误。
回答by CyberAP
UPDATE for Vue CLI 3
Vue CLI 3 的更新
All you need to do now is just set VUE_APP_BASE_URLin your .envfile. Then you'll be able to access it like this:
您现在需要做的只是VUE_APP_BASE_URL在您的.env文件中设置。然后你就可以像这样访问它：
process.env.VUE_APP_BASE_URL
But an even better solution would be to configure a dev server.
但更好的解决方案是配置开发服务器。
Previous solution
以前的解决方案
Solution was quite simple:
解决方案很简单：
Define a special variable for that case within
webpack.dev.conf.jsplugins, omit usingprocess.envfor that.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}`) }),In
\src\main.jsdefine it like this:if (typeof baseURL !== 'undefined') { Vue.axios.defaults.baseURL = baseURL; }
在
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; }
回答by Dmitry S.
The answer above helped me. But I want to make an amendment. In /src/main.jsneed define constant.
上面的答案对我有帮助。但是我想修改一下。在/src/main.js需求定义不变。
Example:
例子：
const baseURL = 'http://localhost:8080';
if (typeof baseURL !== 'undefined') {
Vue.axios.defaults.baseURL = baseURL;
}
Also don't need to add code in file webpack.dev.conf.js. Although maybe this is only suitable for my problem.
也不需要在文件中添加代码webpack.dev.conf.js。虽然这可能只适合我的问题。
My problem: Dynamic host in axios
我的问题：axios 中的动态主机
