Question

我正在使用Firebase托管开发一个简单的VueJS应用。我将在firebase deploy之后使用npm run build部署到Web。但是，部署完成后，该网页与使用npm run serve的本地构建有所不同。我不明白其原因，请帮助我，我是新手。

firebase.json

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

项目结构

package.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"
  ]
}

App.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>

router / index.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 
})

Answer 1

从package.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

您在开发和生产中的设置可能不同，并且导致页面差异。

Answer 2

我认为这与publicPath的项目配置有关，默认为'/'，您可以看到文档：Configuration Reference | Vue CLI

命令“ npm run build”未在VueJS项目上正确创建构建

2 个答案: