npm запустить сборку на Vue проект заполняет base_url как неопределенный - PullRequest
0 голосов
/ 17 марта 2020

Я разместил информацию о своей среде здесь на страницах ошибок vue / cli github вчера. Не похоже, что на все ошибки реагируют, поэтому я надеюсь, что вы, ребята, могли бы помочь мне.

Короткая версия: У меня есть проект Vue / Firebase. Я пытаюсь создать его, чтобы развернуть его на Firebase. Проект работает отлично, когда я обслуживаю его через Vue UI. Когда я запускаю npm run build, созданный файл /dist/index.html имеет hrefs, которые начинаются с "/ undefined / ...". Очевидно, что тогда это не сработает, когда я разверну его в Firebase, что даст мне такие ошибки, как Uncaught SyntaxError: Unexpected token '<'

Подозрительные вещи:

  1. После развертывания в Firebase , он все еще может найти мой favicon.ico, даже если он думает, что он на https://myproject.firebaseapp.com/undefined/favicon.ico.
  2. В моей информации об окружении у меня есть npmGlobalPackages: @vue/cli: Not Found. Я попытался выполнить следующие шаги: в комментарии на странице GitHub выше , но я не смог изменить это.
  3. В моей информации об окружении написано Browsers: Edge: 44.18362.449.0. Я не знаю, имеет ли это значение, но я работал и тестировал только в Chrome.

Вещи, которые я пробовал

Согласно многим ответам stackoverflow, я могу Try by adding <base href="/" /> into the <head> of your index.html. Hope it will work. и You might have used "./" prefix for Relative path in src attributes of your index.html, Just replace it with "<%= BASE_URL %>" and it will work fine.. Я попробовал оба, и это все еще не работает (я также попробовал предложение аскера снова запустить npm install). Помимо указанных мной изменений, у меня есть сгенерированный индекс Firebase. html файл.

Согласно многим другим вопросам, Unexpected token '<' может быть проблемой с кешем в Firebase. Они сказали, что я могу попробовать refre sh (который я пробовал) или очистить кеш (который я тоже пробовал). Я даже пытался перейти на совершенно другой компьютер, и я все еще получаю ту же ошибку. Я, честно говоря, не думаю, что это так, потому что я не думаю, что мой файл dist / index. html должен иметь неопределенное значение, то есть до того, как я загружу его в Firebase.

Код: vue .config. js

module.exports = {
  "transpileDependencies": [
    "vuetify"
  ],
  devServer: {
        proxy: 'https://myredactedprojectname.com/',
    },
  publicPath: process.env.NODE_ENV === 'production'
    ? '/' + process.env.CI_PROJECT_NAME + '/'
    : '/'
}

public / index. html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <base href="/" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>soa</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but soa doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

dist / index. html

<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><base href=/ ><link rel=icon href="/undefined/favicon.ico"><title>soa</title><link rel=stylesheet href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css><link href="/undefined/css/chunk-02393c0e.868814f6.css" rel=prefetch><link href="/undefined/css/chunk-0413c1cf.da33aaeb.css" rel=prefetch><link href="/undefined/css/chunk-05af17cb.0670aa22.css" rel=prefetch><link href="/undefined/css/chunk-05c2d357.0670aa22.css" rel=prefetch><link href="/undefined/css/chunk-05f9ac48.0670aa22.css" rel=prefetch><link href="/undefined/css/chunk-061bbc7c.0670aa22.css" rel=prefetch><link href="/undefined/css/chunk-0c3f6c05.fa43d5a7.css" rel=prefetch><link href="/undefined/css/chunk-0ffc1848.0cf83054.css" rel=prefetch><link href="/undefined/css/chunk-28537b2e.f613719f.css" rel=prefetch><link href="/undefined/css/chunk-2991328e.53d7c3bd.css" rel=prefetch><link href="/undefined/css/chunk-3451d3f0.0cf83054.css" rel=prefetch><link href="/undefined/css/chunk-50451b64.20012414.css" rel=prefetch><link href="/undefined/css/chunk-579e1ea3.36ca82f6.css" rel=prefetch><link href="/undefined/css/chunk-774d451a.bbdf16ed.css" rel=prefetch><link href="/undefined/css/chunk-796d4363.0cf83054.css" rel=prefetch><link href="/undefined/css/chunk-889ba836.0cf83054.css" rel=prefetch><link href="/undefined/css/chunk-8b217ef2.0670aa22.css" rel=prefetch><link href="/undefined/css/chunk-a2794958.469377bf.css" rel=prefetch><link href="/undefined/css/chunk-a808dfec.0670aa22.css" rel=prefetch><link href="/undefined/css/chunk-a97ba050.343c0125.css" rel=prefetch><link href="/undefined/css/chunk-dbbcb6ca.afbf6e2a.css" rel=prefetch><link href="/undefined/js/chunk-02393c0e.1131b09f.js" rel=prefetch><link href="/undefined/js/chunk-0413c1cf.226cb5af.js" rel=prefetch><link href="/undefined/js/chunk-05af17cb.03fb4e75.js" rel=prefetch><link href="/undefined/js/chunk-05c2d357.d226fc27.js" rel=prefetch><link href="/undefined/js/chunk-05f9ac48.bf6105aa.js" rel=prefetch><link href="/undefined/js/chunk-061bbc7c.616f91e0.js" rel=prefetch><link href="/undefined/js/chunk-0c3f6c05.cd0b340b.js" rel=prefetch><link href="/undefined/js/chunk-0ffc1848.fc935ef9.js" rel=prefetch><link href="/undefined/js/chunk-28537b2e.46a32516.js" rel=prefetch><link href="/undefined/js/chunk-2991328e.007c3af2.js" rel=prefetch><link href="/undefined/js/chunk-2d22922a.59463fdb.js" rel=prefetch><link href="/undefined/js/chunk-2d22a109.07601e72.js" rel=prefetch><link href="/undefined/js/chunk-2d22d746.c132ede6.js" rel=prefetch><link href="/undefined/js/chunk-3451d3f0.88a2ff05.js" rel=prefetch><link href="/undefined/js/chunk-3f6524ae.aaee21ad.js" rel=prefetch><link href="/undefined/js/chunk-50451b64.8e065900.js" rel=prefetch><link href="/undefined/js/chunk-579e1ea3.6d02e597.js" rel=prefetch><link href="/undefined/js/chunk-774d451a.ed3b640a.js" rel=prefetch><link href="/undefined/js/chunk-796d4363.0c75e4bf.js" rel=prefetch><link href="/undefined/js/chunk-889ba836.e0cd6e81.js" rel=prefetch><link href="/undefined/js/chunk-8b217ef2.ced2c34f.js" rel=prefetch><link href="/undefined/js/chunk-a0d25322.4e3c26f4.js" rel=prefetch><link href="/undefined/js/chunk-a2794958.e198bb98.js" rel=prefetch><link href="/undefined/js/chunk-a808dfec.07a35948.js" rel=prefetch><link href="/undefined/js/chunk-a97ba050.51a395a6.js" rel=prefetch><link href="/undefined/js/chunk-dbbcb6ca.c0c8846c.js" rel=prefetch><link href="/undefined/css/chunk-vendors.434320c7.css" rel=preload as=style><link href="/undefined/js/app.0215a074.js" rel=preload as=script><link href="/undefined/js/chunk-vendors.6698b677.js" rel=preload as=script><link href="/undefined/css/chunk-vendors.434320c7.css" rel=stylesheet></head><body><noscript><strong>We're sorry but soa doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src="/undefined/js/chunk-vendors.6698b677.js"></script><script src="/undefined/js/app.0215a074.js"></script></body></html>

1 Ответ

0 голосов
/ 18 марта 2020

Итак, оказалось, что мои переменные окружения не были установлены, именно поэтому он стал неопределенным. Вместо этого я просто установил свой путь публикации c в '/'.

vue .config. js:

module.exports = {
  "transpileDependencies": [
    "vuetify"
  ],
  devServer: {
        proxy: 'https://myprojectname.com/',
    },
  publicPath: '/'
}
...