Команда "npm run build" не создает корректно построенную версию проекта VueJS - PullRequest
Новая
       23

Команда "npm run build" не создает корректно построенную версию проекта VueJS

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

Я занимаюсь разработкой простого VueJS приложения с использованием хостинга Firebase. Я развернут в сети, используя firebase deploy после npm run build. Но когда развертывание завершено, веб-страница отличается от локальной сборки с использованием npm run serve. Я не могу понять причину этого, пожалуйста, помогите мне, я новичок ie с этим.

база огня. json

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

структура проекта

enter image description here

пакет. json

{
  "name": "quinta-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.4.4",
    "vue": "^2.6.10",
    "vue-router": "^3.1.4",
    "vuetify": "^2.2.3",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "sass": "^1.19.0",
    "sass-loader": "^8.0.0",
    "vue-cli-plugin-vuetify": "^2.0.3",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.3.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {
      "no-unused-vars": "off",
      "no-console": "off"
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

vue .config. js

module.exports = {
  "transpileDependencies": [
    "vuetify"
  ]
}

Приложение. vue

<template>
  <v-app>
    <router-view v-if="isLoggedIn"></router-view>
    <login v-else />
  </v-app>
</template>

<script>
import login from "@/views/Login"

export default {
  name: "App",
  components: {
    login
  },
  data: () => ({
    isLoggedIn: false
  })
};
</script>

<style>
</style>

маршрутизатор / индекс. js

import Login from '@/views/Login'
import Home from '@/views/Home'
import VueRouter from 'vue-router'
import Vue from 'vue'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/login',
        name: 'Login',
        component: Login
    }
]

export default new VueRouter({ 
    mode: 'history',
    routes 
})

Ответы [ 2 ]

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

Я думаю, что конфигурация вашего проекта publicPath, '/' по умолчанию, вы можете увидеть do c: Справочник по конфигурации | Vue CLI

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

Из пакета. json, вы можете увидеть

npm run serve: он работает vue-cli-service serve, который запускает сервер разработки.

https://cli.vuejs.org/guide/cli-service.html#vue -cli-service -serve

npm run build: работает vue-cli-service build, который создает готовый к производству пакет.

https://cli.vuejs.org/guide/cli-service.html#vue -cli-service-build

У вас могут быть разные настройки в dev и production и вызванные различия в страницах.

...