Vue：webpack 没有在生产中加载 css

Posted 2023-02-22

【中文标题】Vue：webpack 没有在生产中加载 css

【英文标题】：Vue: webpack is not loading css in production

【发布时间】：2020-10-04 20:05:28

【问题描述】：

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

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

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

我的 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 用于加载器 vue.js 文件在 environment.js 中导入为const vue = require('./loaders/vue')

vue.js

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

和 生产.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

【问题讨论】：

您在日志中看到任何错误吗？如果是这样，您可以发布这些日志吗？例如，当我的布局文件中有 <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 时，我注意到了问题，但日志将帮助我们找出确切的问题

@UmarGhouse 在问题中添加了日志，我没有使用<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

有趣。我没有看到任何错误 - 您是否尝试过 使用 stylesheet_pack_tag 运行它？

我没有在我的代码中添加<%= stylesheet_pack_tag %>。现在它正在工作。谢谢@UmarGhouse

嘿没问题！快乐编码:)

【参考方案1】：

在我的布局文件中添加了这段代码

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

它奏效了。没有这个，css 在部署到生产环境时不会加载。