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

栏目: 编程语言 · 发布时间: 6年前

内容简介:★<span id="top">目录</span>

Nuxt.js 全面配置

nuxt-config: 持续更新中

其他系列

vue-cli3 全面配置

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

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

npx create-nuxt-app <项目名>

npx create-nuxt-app <项目名>

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

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

module.exports = {
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  }
}

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

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

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

  package.json 中添加 analyze 命令

"analyze": "nuxt build --analyze"

  修改 nuxt.config.js

export default {
  build: {
    analyza: {
      analyzeMode: 'static'
    }
  }
}

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

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

  修改 nuxt.config.js

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

  修改 nuxt.config.js

export default {
  modules: [
    ['nuxt-sass-resources-loader', ['~/assets/scss/variable.scss']]
  ],
  styleResources: {
    scss: '~/assets/scss/variable.scss'
  }
}

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

npm i -D babel-plugin-component
// or
yarn add -D babel-plugin-component

  修改 nuxt.config.js

module.exports = {
  plugins: ['@/plugins/element-ui'],
  build: {
    babel: {
      plugins: [
        [
          'component',
          { libraryName: 'element-ui', styleLibraryName: 'theme-chalk' }
        ]
      ]
    }
  },
}

  修改 plugins/element-ui.js

import Vue from 'vue'
import {
  Button, Loading, Notification, Message, MessageBox
} from 'element-ui'

import lang from 'element-ui/lib/locale/lang/zh-CN'
import locale from 'element-ui/lib/locale'

// configure language
locale.use(lang)

// set
Vue.use(Loading.directive)
Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$notify = Notification
Vue.prototype.$message = Message

// import components
Vue.use(Button);
// or
// Vue.component(Button.name, Button)

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

npm i -D hard-source-webpack-plugin

  修改 nuxt.config.js

module.exports = {
  build: {
    extractCSS: true,
    extend(config, ctx) {
      if (ctx.isDev) {
        config.plugins.push(
          new HardSourceWebpackPlugin({
            cacheDirectory: '.cache/hard-source/[confighash]'
          })
        )
      }
    }
  }
}

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

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

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

npm install --global windows-build-tools

yarn global add windows-build-tools

  修改 nuxt.config.js

const PurgecssPlugin = require('purgecss-webpack-plugin')
const glob = require('glob-all')
const path = require('path')
const resolve = dir => path.resolve(__dirname, dir);

module.exports = {
  build: {
    extractCSS: true,
    extend(config, ctx) {
      if (!ctx.isDev) {
        config.plugins.push(
          new PurgecssPlugin({
            paths: glob.sync([
              resolve('./pages/**/*.vue'),
              resolve('./layouts/**/*.vue'),
              resolve('./components/**/*.vue')
            ]),
            extractors: [
              {
               extractor: class Extractor {
                  static extract(content) {
                    const validSection = content.replace(
                      /<style([\s\S]*?)<\/style>+/gim,
                      ""
                    );
                    return validSection.match(/[A-Za-z0-9-_:/]+/g) || [];
                  }
                },
                extensions: ['vue']
              }
            ],
            whitelist: ['html', 'body', 'nuxt-progress']
          })
        )
      }
    }
  }
}

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

npm i shrink-ray-current

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

npm install --global windows-build-tools

yarn global add windows-build-tools

  修改 nuxt.config.js

export default {
  render: {
    http2: {
      push: true
    },
    compressor: shrinkRay()
  }
}

以上所述就是小编给大家介绍的《vue服务端渲染——Nuxt.js全面配置》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Host Your Web Site In The Cloud

Host Your Web Site In The Cloud

Jeff Barr / SitePoint / 2010-9-28 / USD 39.95

Host Your Web Site On The Cloud is the OFFICIAL step-by-step guide to this revolutionary approach to hosting and managing your websites and applications, authored by Amazon's very own Jeffrey Barr. "H......一起来看看 《Host Your Web Site In The Cloud》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具