Vue开发版本可以工作，但生产版本不能(Vue CLI + Django)

Question

我已经使用Django和Vue+Vuetify建立了一个网站，Django运行后端，Vue运行前端。我一直使用Vue CLI编译.vue文件。但是，现在我正准备将代码转移到生产版本，我遇到了以下问题：

vue-cli-service build创建的Vue应用程序不起作用。当使用vue-cli-service build --mode development在开发模式下运行时，一切正常，但构建版本不起作用。JavaScript控制台不会给出任何错误。几乎什么都没有渲染，而且很少渲染的东西似乎不包含样式。但是，我可以看到axios调用确实起作用了，并且使用检查器显示了添加到主体中的各种元素，它们根本不会呈现。

然而，查看我的package.json，我看不到任何明显的错误。

--package.json--
{
  "name": "vueapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-dev": "vue-cli-service build --mode development",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuetify": "^2.4.0"
  },
  "devDependencies": {
    "@mdi/font": "^5.9.55",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "material-design-icons-iconfont": "^6.1.0",
    "sass": "~1.32.0",
    "sass-loader": "^10.0.0",
    "vue-cli-plugin-vuetify": "~2.4.1",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.7.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

还有我的vue.config.js

--vue.config.js--
const path = require('path');

module.exports = {
    // Should be STATIC_URL + path/to/build
    publicPath: '/static/app/',

    // Output to a directory in STATICFILES_DIRS
    outputDir: path.resolve(__dirname, '../static/app/'),

    // Django will hash file names, not webpack
    filenameHashing: false,

    // See: https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
    runtimeCompiler: true,

    devServer: {
        writeToDisk: true, // Write files to disk in dev mode, so Django can serve the assets
    },

    transpileDependencies: [
      'vuetify'
    ],
    configureWebpack: {  
      resolve: {   
        alias: {  
          '@components': path.resolve(__dirname, 'src/components'),
          '@shared': path.resolve(__dirname, 'src/shared')
        },
        extensions: ['.js', '.vue', '.json']
      }
    }
};

更新1- 2.9.2021

npm run build只给出有关大小的警告，而不是错误。下面是完整的输出：

 WARNING  Compiled with 3 warnings                                                                               8.26.39

 warning

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  fonts/materialdesignicons-webfont.woff (454 KiB)
  fonts/materialdesignicons-webfont.woff2 (318 KiB)
  fonts/materialdesignicons-webfont.ttf (1000 KiB)
  fonts/materialdesignicons-webfont.eot (1000 KiB)
  css/chunk-vendors.css (782 KiB)
  js/chunk-vendors.js (550 KiB)

 warning

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (1.44 MiB)
      css/chunk-vendors.css
      js/chunk-vendors.js
      css/app.css
      js/app.js


 warning

webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

  File                                   Size                                  Gzipped

  ..\static\app\js\chunk-vendors.js      550.43 KiB                            168.66 KiB
  ..\static\app\js\app.js                142.10 KiB                            28.11 KiB
  ..\static\app\css\chunk-vendors.css    782.11 KiB                            111.41 KiB
  ..\static\app\css\app.css              0.27 KiB                              0.17 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The ..\static\app directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

更新2- 2.9.2021

我发现基于this的答案是

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

来修复最初的问题。无论出于什么原因，似乎css和scss都没有被编译为产品。由于某种原因，所有的图标也没有包括在内

Answer 1

尝试将publicPath: '/static/app/'更改为publicPath: '' (vue.config.js)。有时，公共路径并不像您预期的那样工作

Answer 2

我已经找到了解决问题的办法，尽管问题的原因还不清楚。

正如我在问题中所说的，当应用程序在开发模式下编译时，就会包含CSS文件。在与朋友讨论后，我们手动将CSS文件调用放入头部，如下所示：

<head>
  <link rel="stylesheet" href="{% static 'app/css/chunk-vendors.css' %}" >
  <link rel="stylesheet" href="{% static 'app/css/app.css' %}" >
</head>

为什么这是可行的？我们不知道，但它确实修复了应用程序。