1

我从事这个项目大约有四个月了。在开发版本中完全可以，但是当我构建项目并将其上传到服务器时，我的一些样式将不会被应用。

有关更多信息，我在组件中都导入了样式。

<style>
</style>

和资产 css 文件。 assets\css\style.css

我不知道这样做对不对？

我第一次输入npm run buildvs code 终端时收到此错误

第一次 npm 运行构建

**✖ Nuxt Fatal Error**                                                                                         
Error: EPERM: operation not permitted, mkdir                                                               
'C:\Users\rsh\folder\project\.nuxt\components' 

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! myproject@1.0.0 build: `nuxt build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the myproject@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

 npm ERR! A complete log of this run can be found in:
 npm ERR!     C:\Users\rsh\AppData\Roaming\npm-cache\_logs\2022-01-17T10_43_05_599Z-debug.log

但第二次它将在几个警告内构建项目。

当它在第二次尝试后构建时npm run build

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
 fonts/materialdesignicons-webfont.b26c938.eot (550 KiB)
 fonts/materialdesignicons-webfont.3073b3f.woff (265 KiB)
 fonts/materialdesignicons-webfont.bfd0d90.ttf (550 KiB)
fonts/icofont.9c33516.woff2 (525 KiB)
fonts/icofont.dad3acc.woff (630 KiB)
img/signin.1455693.svg (846 KiB)
6871893.js (376 KiB)
f031b5e.js (369 KiB)
bc52125.js (376 KiB)
0a7bf8a.js (371 KiB)
20d9dc3.js (673 KiB)
4ab266a.js (401 KiB)
5e1927c.js (1.35 MiB)
6796184.js (2.52 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the    recommended limit (1000 KiB). This can impact web performance.
  Entrypoints:
  app (3.42 MiB)
  7f9ae0b.js
  4fe44c5.js
  6796184.js
  20d9dc3.js

后npm run build

ERROR  Failed to compile with 3 errors                                                  friendly-errors 14:13:07


ERROR  in ./.nuxt/views/app.template.html                                              friendly-errors 14:13:07

Module build failed (from ./node_modules/html-webpack-plugin /lib/loader.js):            friendly-errors 14:13:07
 Error: ENOENT: no such file or directory, open 'C:\Users \rsh\project1\.nuxt\views\app.template.html'
                                                                                    friendly-errors 14:13:07

ERROR  in ./.nuxt/client.js                                                             friendly-errors 14:13:07

  Module build failed (from ./node_modules/babel-loader/lib/index.js):                    friendly-errors 14:13:07
 Error: ENOENT: no such file or directory, open 'C:\Users\rsh\project1\.nuxt\client.js'
                                                                                    friendly-errors 14:13:07
 @ multi ./node_modules/eventsource-polyfill/dist/browserify- eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000& ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js
                                                                                           friendly-errors 14:13:07
 error

当我输入nuxt buildvs code 终端时，我收到此错误

使用 nuxt 构建

  nuxt : The term 'nuxt' is not recognized as the name of a cmdlet, function, script file, or    operable program. 
  Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
  At line:1 char:1
  + nuxt build
  + ~~~~
  + CategoryInfo          : ObjectNotFound: (nuxt:String) [], CommandNotFoundException
  + FullyQualifiedErrorId : CommandNotFoundException

如果有人可以帮助我或分享相同的经验，我真的很感激

4

1 回答 1

1

我通过添加这一段来nuxt.config.js构建配置解决了我的问题。

这实际上是我想出来的。我已经内联导入了我的样式，在资产文件和 Vue 组件样式标记中，此代码会将我所有的 CSS 提取到一个文件中（根据Nuxt 文档）并同步开发与生产样式并覆盖样式Vuetify。

 extractCSS: {
  ignoreOrder: true
},
optimization: {
  splitChunks: {
    cacheGroups: {
      styles: {
        name: 'styles',
        test: /\.(css|vue)$/,
        chunks: 'all',
        enforce: true
      }
    }
  }
},

我希望这对你也有帮助。

于 2022-01-19T14:17:36.650 回答