Как я могу использовать переменные среды, если я использую vuejs с CDN?

Question

Я использовал Vuejs CDN для разработки своего приложения. Теперь я хочу разделить dev и prod, поскольку конечные точки API разделены. Я не хочу раскрывать свою конечную точку API разработчика. Как я могу сделать это самым простым способом?

Я пробовал использовать dotenv . Поместите переменную DEBUG в .env.

var debug = process.env.DEBUG;
console.log(debug);

Vue.directive('focus', {
    inserted: function (el) {
        el.focus()
    }
})

var vm =  new Vue({...

Мой файл .env

DEBUG=true

Я могу прочитать переменную отладки. Однако выдает ошибку «Vue не определено», поскольку я не устанавливал Vue с npm. Или я должен установить Vue с npm?

Answer 1

Если вы используете Vue CLI , средства для этого уже встроены в виде файлов .env . Вы должны создать файлы .env.dev и .env.production (и, возможно, .env.local для локальной разработки), содержащие:

VUE_APP_ENDPOINT=https://...

К которым в ваших Javascript файлах вы можете получить доступ как:

const endpoint = process.env.VUE_APP_ENDPOINT;

Затем вы создаете разные сборки для своих двух разных сред:

vue-cli-service build --mode dev  # or --mode production

Переменные будут включены в сборку, поэтому две разные сборки будут содержать только свои соответствующие конечные точки.