目录√ 初始化项目√ 环境变量配置√ 打包分析√ 提供全局 scss 变量√ 按需引入 element-ui√ 配置 hard-source-webpa..._hardsourcewebpackplugin配置 nuxt">
当前位置:   article > 正文

vue服务端渲染——Nuxt.js全面配置

hardsourcewebpackplugin配置 nuxt

Nuxt.js 全面配置

nuxt-config: 持续更新中

其他系列

vue-cli3 全面配置

<span id="top">目录</span>

<span id="init">☞ 初始化项目</span>

  1. npx create-nuxt-app <项目名>
  2. npx create-nuxt-app <项目名>

▲ 回顶部

<span id="env">☞ 环境变量配置</span>

  可以配置在客户端和服务端共享的环境变量

  1. module.exports = {
  2. env: {
  3. baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  4. }
  5. }

  通过以下两种方式来使用 baseUrl 变量

  1. 通过 process.env.baseUrl
  2. 通过 context.baseUrl,请参考context api

▲ 回顶部

<span id="analyze">☞ 打包分析</span>

  package.json 中添加 analyze 命令

"analyze": "nuxt build --analyze"

  修改 nuxt.config.js

  1. export default {
  2. build: {
  3. analyza: {
  4. analyzeMode: 'static'
  5. }
  6. }
  7. }

▲ 回顶部

<span id="scss">☞ 提供全局 scss 变量</span>

  • 方法一:
  1. npm i -S @nuxtjs/style-resources
  2. npm i -D sass-loader node-sass

  修改 nuxt.config.js

  1. export default {
  2. modules: [
  3. '@nuxtjs/style-resources',
  4. ],
  5. styleResources: {
  6. scss: '~/assets/scss/variable.scss'
  7. }
  8. }
  • 方法二:
npm i -D nuxt-sass-resources-loader sass-loader node-sass

  修改 nuxt.config.js

  1. export default {
  2. modules: [
  3. ['nuxt-sass-resources-loader', ['~/assets/scss/variable.scss']]
  4. ],
  5. styleResources: {
  6. scss: '~/assets/scss/variable.scss'
  7. }
  8. }

▲ 回顶部

<span id="elementui">☞ 按需引入 element-ui</span>

  1. npm i -D babel-plugin-component
  2. // or
  3. yarn add -D babel-plugin-component

  修改 nuxt.config.js

  1. module.exports = {
  2. plugins: ['@/plugins/element-ui'],
  3. build: {
  4. babel: {
  5. plugins: [
  6. [
  7. 'component',
  8. { libraryName: 'element-ui', styleLibraryName: 'theme-chalk' }
  9. ]
  10. ]
  11. }
  12. },
  13. }

  修改 plugins/element-ui.js

  1. import Vue from 'vue'
  2. import {
  3. Button, Loading, Notification, Message, MessageBox
  4. } from 'element-ui'
  5. import lang from 'element-ui/lib/locale/lang/zh-CN'
  6. import locale from 'element-ui/lib/locale'
  7. // configure language
  8. locale.use(lang)
  9. // set
  10. Vue.use(Loading.directive)
  11. Vue.prototype.$loading = Loading.service
  12. Vue.prototype.$msgbox = MessageBox
  13. Vue.prototype.$alert = MessageBox.alert
  14. Vue.prototype.$confirm = MessageBox.confirm
  15. Vue.prototype.$prompt = MessageBox.prompt
  16. Vue.prototype.$notify = Notification
  17. Vue.prototype.$message = Message
  18. // import components
  19. Vue.use(Button);
  20. // or
  21. // Vue.component(Button.name, Button)

▲ 回顶部

<span id="hard">☞ 配置 hard-source-webpack-plugin</span>

npm i -D hard-source-webpack-plugin

  修改 nuxt.config.js

  1. module.exports = {
  2. build: {
  3. extractCSS: true,
  4. extend(config, ctx) {
  5. if (ctx.isDev) {
  6. config.plugins.push(
  7. new HardSourceWebpackPlugin({
  8. cacheDirectory: '.cache/hard-source/[confighash]'
  9. })
  10. )
  11. }
  12. }
  13. }
  14. }

▲ 回顶部

<span id="removecss">☞ 去除多余 css</span>

npm i --D glob-all purgecss-webpack-plugin

  若安装失败,请先用管理员身份安装以下全局依赖

  1. npm install --global windows-build-tools
  2. yarn global add windows-build-tools

  修改 nuxt.config.js

  1. const PurgecssPlugin = require('purgecss-webpack-plugin')
  2. const glob = require('glob-all')
  3. const path = require('path')
  4. const resolve = dir => path.resolve(__dirname, dir);
  5. module.exports = {
  6. build: {
  7. extractCSS: true,
  8. extend(config, ctx) {
  9. if (!ctx.isDev) {
  10. config.plugins.push(
  11. new PurgecssPlugin({
  12. paths: glob.sync([
  13. resolve('./pages/**/*.vue'),
  14. resolve('./layouts/**/*.vue'),
  15. resolve('./components/**/*.vue')
  16. ]),
  17. extractors: [
  18. {
  19. extractor: class Extractor {
  20. static extract(content) {
  21. const validSection = content.replace(
  22. /<style([\s\S]*?)<\/style>+/gim,
  23. ""
  24. );
  25. return validSection.match(/[A-Za-z0-9-_:/]+/g) || [];
  26. }
  27. },
  28. extensions: ['vue']
  29. }
  30. ],
  31. whitelist: ['html', 'body', 'nuxt-progress']
  32. })
  33. )
  34. }
  35. }
  36. }
  37. }

▲ 回顶部

<span id="brotli">☞ Brotli 压缩</span>

npm i shrink-ray-current

  若安装失败,请先用管理员身份安装以下全局依赖

  1. npm install --global windows-build-tools
  2. yarn global add windows-build-tools

  修改 nuxt.config.js

  1. export default {
  2. render: {
  3. http2: {
  4. push: true
  5. },
  6. compressor: shrinkRay()
  7. }
  8. }

▲ 回顶部

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/煮酒与君饮/article/detail/971505
推荐阅读
相关标签
  

闽ICP备14008679号