内容简介:★<span id="top">目录</span>
Nuxt.js 全面配置
其他系列
<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 变量
- 通过 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() } }
以上所述就是小编给大家介绍的《vue服务端渲染——Nuxt.js全面配置》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 配置Vue服务器端渲染SSR(二)
- Octane渲染入门-渲染设置图文版
- 通过分析 WPF 的渲染脏区优化渲染性能
- React 服务器端渲染和客户端渲染效果对比
- iOS渲染-将视频原始数据(RGB,YUV)渲染到屏幕上
- 通过共享内存优化 Flutter 外接纹理的渲染性能,实时渲染不是梦
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
ES6标准入门(第3版)
阮一峰 / 电子工业出版社 / 2017-9 / 99.00
ES6是下一代JavaScript语言标准的统称,每年6月发布一次修订版,迄今为止已经发布了3个版本,分别是ES2015、ES2016、ES2017。本书根据ES2017标准,详尽介绍了所有新增的语法,对基本概念、设计目的和用法进行了清晰的讲解,给出了大量简单易懂的示例。本书为中级难度,适合那些已经对JavaScript语言有一定了解的读者,可以作为学习这门语言最新进展的工具书,也可以作为参考手册......一起来看看 《ES6标准入门(第3版)》 这本书的介绍吧!