用于生产的 VUE 构建不应用 CSS答案

【问题标题】：VUE build for production does not apply CSS用于生产的 VUE 构建不应用 CSS
【发布时间】：2021-08-22 17:55:21
【问题描述】：

我已经购买了this VUE template。从它的文档中，如果我运行npm run install && npm run dev。看起来是正确的

当我执行npm run build 来准备我的生产项目时。如您所见，它看起来不一样：

我检查了生成的 HTML 中的 css 链接，只有一个指向“文件”。我相信是正确的...（？）

这里是vue.config.js：

module.exports = {

  publicPath: process.env.NODE_ENV === 'production' ? './' : './',
  outputDir: 'dist',
  assetsDir: 'app',
  indexPath: 'index.html',
  configureWebpack: {
    devtool: 'source-map'
  },

}

我的env.production 看起来像：

NODE_ENV=production
VUE_APP_TITLE=My Base Front End

我在配置文件中遗漏了什么？

【问题讨论】：

打开浏览器控制台并检查错误。应该是路径问题。检查浏览器是否在控制台中加载文件时出错

标签： vue.js frontend yarnpkg npm-build

【解决方案1】：

尝试在您的布局文件中为标签stylesheet_pack_tag 添加以下代码：

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

我可以从过去的经历中回忆起类似的问题。

【讨论】：