Vue：webpack在生产中无法加载css。

Question

我在Vue+Rails项目中使用webpack。

我的问题是，当我在开发模式下工作时，所有的css都能正常工作，但在生产模式下，css却没有加载，如下图所示。

如图所示，css在webpack中没有加载。

我的webpack文件夹中包含以下代码

环境.js

const webpack = require('webpack')
const { environment } = require('@rails/webpacker')
// const { VueLoaderPlugin } = require('vue-loader')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const vue = require('./loaders/vue')

// environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.plugins.append(
  'VueLoaderPlugin',
  new VueLoaderPlugin()
);
environment.loaders.append('vue', vue)

environment.plugins.append(
  'Globals', // arbitrary name
  new webpack.ProvidePlugin({
    $: 'jquery',
    _: 'underscore'
  })
);

module.exports = environment

用于加载的vue.js文件在environment.js中被导入为 const vue = require('./loaders/vue')

vue.js

module.exports = {
      test: /\.vue(\.erb)?$/,
      use: [{
        loader: 'vue-loader',
      }]
    }

和production.js

process.env.NODE_ENV = process.env.NODE_ENV || 'production'

const environment = require('./environment')

module.exports = environment.toWebpackConfig()

和package.json文件

{
  "dependencies": {
    "@rails/webpacker": "4.2.2",
    "axios": "^0.19.2",
    "ckeditor4-vue": "^0.1.0",
    "deepmerge": "^4.2.2",
    "fibers": "^4.0.2",
    "lodash": "^4.17.15",
    "sass": "^1.25.0",
    "sass-loader": "^8.0.2",
    "vue": "^2.6.11",
    "vue-loader": "^15.8.3",
    "vue-lodash": "^2.1.2",
    "vue-router": "^3.1.5",
    "vue-template-compiler": "^2.6.11",
    "vue-timeago": "^5.1.2",
    "vuetify": "^2.2.10"
  },
  "devDependencies": {
    "webpack-dev-server": "^3.11.0"
  }
}

这些是我使用的webpack配置，如上图所示，webpack的css在生产中无法加载。它是在开发中工作，但不是在生产中

EDIT:

我运行这个命令，然后 RAILS_ENV=production rails s -p 3000载入登陆页面后的日志

=> Booting WEBrick
=> Rails 6.0.3 application starting in production http://0.0.0.0:3000
=> Run `rails server --help` for more startup options
[2020-06-15 19:46:30] INFO  WEBrick 1.4.2
[2020-06-15 19:46:30] INFO  ruby 2.6.3 (2019-04-16) [x86_64-darwin18]
[2020-06-15 19:46:30] INFO  WEBrick::HTTPServer#start: pid=45667 port=3000
127.0.0.1 - - [15/Jun/2020:19:46:34 IST] "GET /login HTTP/1.1" 200 3571
- -> /login
127.0.0.1 - - [15/Jun/2020:19:46:34 IST] "GET /packs/js/application-0ea0a86691fc31d5032d.js HTTP/1.1" 304 0
http://0.0.0.0:3000/login -> /packs/js/application-0ea0a86691fc31d5032d.js
127.0.0.1 - - [15/Jun/2020:19:46:34 IST] "GET /packs/js/application-0ea0a86691fc31d5032d.js.map HTTP/1.1" 304 0
- -> /packs/js/application-0ea0a86691fc31d5032d.js.map

Answer 1

在我的布局文件中添加了以下代码

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

如果没有这个功能，css就不会在部署到生产中时不被加载。