Vue：webpack 未在生产中加载 css

Question

我在Vue+Rails项目中使用webpack

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

如图所示，css 未在 webpack

中加载

我的 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 用于加载程序 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 未在生产环境中加载。它正在开发中但不在生产中

编辑：

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

Vue：webpack 未在生产中加载 css

Vue: webpack is not loading css in production

ruby-on-rails

vue.js

webpack

webpacker