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

Posted 2023-02-22

技术标签:

【中文标题】命令“npm run build”没有在 VueJS 项目上创建正确的构建【英文标题】：Command "npm run build" not creating the correctely build on VueJS project 【发布时间】：2020-05-01 18:52:30 【问题描述】：

我正在使用 Firebase 托管开发一个简单的 VueJS 应用程序。我在npm run build 之后使用firebase deploy 部署到网络。但是当部署完成时，网页与使用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>

路由器/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 
)

【问题讨论】：

你能把你的 package.json 也放在这里吗？编辑@Raymond But when deploy is finished the web page is different from local build -- 这不清楚。它们具体有什么不同？ 【参考方案1】：

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

【讨论】：

哦，是的，如果我输入路径，我可以浏览到正确的页面。但是我的逻辑无法改变，我已经用我的 App.vue 编辑了这个问题因为你选择 vue-router history 模式，它应该和你的服务器代理一起工作：the official solution【参考方案2】：

从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

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

【讨论】：