我从事这个元素已经大约四个月了。在开发版本中完全没问题,但是当我构建元素并将其上传到服务器时我的一些样式将不会应用。
更多信息我已经在组件中导入了样式。
<style>
</style>
和 Assets CSS文件。
assets\css\style.css
我不知道这样做是否正确?
我第一次在 vs code 终端中输入 npm run build
时收到此错误
first time npm run build
**✖ 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! <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="214c5851534e4b44425561100f110f11" rel="noreferrer noopener nofollow">[email protected]</a> build: `nuxt build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e78a9e9795888d828493a7d6c9d7c9d7" rel="noreferrer noopener nofollow">[email protected]</a> 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
但第二次它将在几个警告内构建元素。
when it is built after second try
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
after
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
当我在 vs code 终端中输入 nuxt build
时
我收到此错误
with nuxt build
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
如果有人可以帮助我或分享相同的经验,我将非常感激
最佳答案
我通过将这段添加到 nuxt.config.js
构建配置中解决了我的问题。
这实际上是我想到的。我已经在 Assets 文件和 Vue 组件样式标记中内联导入了样式,此代码会将我的所有 CSS 提取到单个文件中(根据 Nuxt documention )并同步开发与生产样式并覆盖 Vuetify
.
extractCSS: {
ignoreOrder: true
},
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.(css|vue)$/,
chunks: 'all',
enforce: true
}
}
}
},
我希望这对你也有帮助。
关于css - nuxt 样式不会应用于生产模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70740433/