Nuxt.js 全面配置
其他系列
<span id="top">目录</span>
- √ 初始化项目
- √ 环境变量配置
- √ 打包分析
- √ 提供全局 scss 变量
- √ 按需引入 element-ui
- √ 配置 hard-source-webpack-plugin
- √ 去除多余 css
- √ Brotli 压缩
<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 变量
- 通过 process.env.baseUrl
- 通过 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()
- }
- }