Версия Vue для разработки работает, а для производства - нет (Vue CLI + Django)

Я создал сайт, используя Django и Vue+Vuetify, причем Django работает как бэкэнд, а Vue - как фронтэнд. Я использовал Vue CLI для компиляции .vue файлов. Однако теперь, когда я готовлюсь перенести код в производственную версию, я столкнулся со следующей проблемой:

Приложение Vue, созданное vue-cli-service build, не работает. При запуске в режиме разработки с помощью vue-cli-service build --mode development все работает нормально, но версия сборки не работает. Консоль JavaScript не выдает никаких ошибок. Почти ничего не отображается, а то немногое, что отображается, похоже, не имеет включенной стилизации. Однако я вижу, что вызовы axios работают, а использование инспектора показывает, что различные элементы добавлены в тело, но они просто не отображаются.

Однако, глядя на мой 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

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']
      }
    }
};

Попробуйте изменить publicPath: '/static/app/' на publicPath: '' (vue.config.js). Иногда публичный путь работает не так, как вы ожидали

Я обнаружил решение проблемы, хотя причина проблемы не ясна.

Как я уже сказал в вопросе, CSS-файлы включаются, когда приложение компилируется в режиме разработки. После обсуждения с другом, мы поместили вызовы CSS файлов вручную в head следующим образом:

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

Почему это работает? Мы понятия не имеем, но это исправляет работу приложения.

Вернуться на верх