Vue: webpack没有在生产环境中加载css

Question

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

我的问题是，当我在开发模式下工作时，所有的css都工作得很好，但在生产中css不能加载，就像你在下图中看到的那样。

​

​

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

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

environment.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中将vue.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未在生产中加载。它是在开发中工作，而不是在生产中。

编辑：

我运行此命令，然后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在部署到生产环境时就不会加载。