Question

当我在 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
        })
  }
}

Answer 1

环境变量只能在服务器端访问。为了使客户端具有这些值，您需要在全局范围内对其进行声明。

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

Answer 2

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

Answer 3

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

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

如何在Vue中为生产设置环境变量

3 个答案: