Vue中如何设置生产环境变量答案

【问题标题】：How to set up environment variables for production in VueVue中如何设置生产环境变量
【发布时间】：2020-04-29 10:23:22
【问题描述】：

当我在 netlify 上部署 mysite 时，它已成功部署。但它不起作用。当我检查时，我才知道我的应用程序仍在访问 localhost 。我的问题是我应该如何声明环境变量？我是新手..

axios 文件-

import axios from 'axios'
import store from '../store/index'

export default ()=>{
    return axios.create({
    baseURL:process.env.VUE_APP_API_BASE_URL ||
    process.env.API_BASE_URL ||`http://localhost:8082/`,
    headers:{
        authorization:`${store.state.token}`
    }
    })
}

vue.config.js



module.exports = {
  "transpileDependencies": [
    "vuetify"
  ],
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          // modify the options...
          return options
        })
  }
}

【问题讨论】：

标签： vue.js vuejs2 axios netlify

【解决方案1】：

其实你也可以在本地使用 Netlify 环境变量，通过使用 Netlify Dev:https://www.netlify.com/products/dev/ 我最近在我的一个项目中做到了这一点：https://github.com/sunyamare/ubiqum-tgif 注意：您似乎只能在 Netlify (lambda) 函数中使用变量。

【讨论】：

【解决方案2】：

您可以分别为开发和生产变量创建.env.development 和.env.production 文件。

您可以查看here 以获得更多说明。

【讨论】：

【解决方案3】：

环境变量只能在服务器端访问。为了让客户端拥有您需要在全局范围内声明的值。

Webpack 有一个专门用于此的插件 DefinePlguin:

https://webpack.js.org/plugins/define-plugin/

类似：

new webpack.DefinePlugin({
  BASE_URL: JSON.stringify(process.env.VUE_APP_API_BASE_URL),
});

然后，在客户端就可以访问BASE_URL

【讨论】：

嗨，先生。我已经在 netlify 上部署了我的前端，在 heroku 上部署了后端，我将后端 URL 传递给了客户端，即https://vue-blogger.herokuapp.com/ 对吗？我的应用程序仍然请求本地主机？你能帮我解决这个问题吗？
谢谢先生..您的建议帮助我解决了我的问题