Белый экран при сборке на VUE CLI

Question

пишу приложение на Vue.js исользую vue cli, на Дев сервере ошибок нет, но после сборки белый экран, перечитал кучу статей, пробовал методы разные та-же ситуация.

// vue.config.js
module.exports = {
    publicPath: ''
}

Что нужно вписать чтоб заработал Vue собраный?

{
  "name": "name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.5.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.vue --version.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Answer 1

Вы вероятно пытаетесь запустить файл dist/index.html напрямую. В руководстве Vue-cli есть информация по этому поводу:

Каталог dist предназначен для обслуживания HTTP-сервером (если не задали publicPath относительным значением), поэтому не сработает если напрямую открыть dist/index.html через file:// протокол. Самый простой способ предпросмотра вашей сборки для production локально — использовать статический файловый сервер Node.js, например serve:
npm install -g serve
# флаг -s означает запуск serve в режиме одностраничного приложения (SPA)
# который решает проблему маршрутизации, описанную ниже
serve -s dist

Таким образом, исходя из того, что ваш проект успешно собран (успешно выполнена команда build в Vue-cli), установите пакет serve (флаг -g означает, что пакет будет установлен глобально и может быть использован вами в любом вашем проекте для локального предпросмотра):

npm install -g serve

И находясь в корневой директории вашего проекта, запустите локальный предпросмотр используя команду:

serve -s dist

Если эти два условия выполнены правильно, вы должны в вашем терминале, где запускали вышеуказанные команды, увидеть отчет о том, на каком хосте и порте запущен предпросмотр. Скопируйте URL и вставьте в адресную строку браузера, чтобы просмотреть работу вашего проекта.

БЛОГ НА HUSL

Белый экран при сборке на VUE CLI

Ответы (1 шт):