Как настроить переменные среды для производства в Vue - PullRequest
Новая
       38

Как настроить переменные среды для производства в Vue

2 голосов
/ 12 января 2020

Когда я развернул mysite на netlify , он был успешно развернут. Но это не работает. и когда я проверил, я узнал, что мое приложение все еще работает на localhost . У меня вопрос, как я должен объявить переменные среды? Я новичок в этом ..

Топор ios file- 

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
        })
  }
}

Ответы [ 3 ]

2 голосов
/ 12 января 2020

Переменные среды доступны только на стороне сервера. Для того, чтобы на стороне клиента были значения, вам необходимо объявить его в глобальной области.

В 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

0 голосов
/ 21 января 2020

Фактически, вы можете использовать переменные среды Netlify также локально, используя Netlify Dev: https://www.netlify.com/products/dev/ Недавно я сделал это в одном из моих проектов: https://github.com/sunyamare/ubiqum-tgif Примечание. Кажется, вы можете использовать переменные только в функциях Netlify (lambda).

0 голосов
/ 12 января 2020

Вы можете создать .env.development и .env.production файлы для переменных разработки и производства соответственно.

Вы можете проверить здесь для получения дополнительной информации.

...