nuxt
Nuxt.js 是一个基于 Vue.js 的通用应用框架。
官网：https://nuxtjs.org/
中文：https://zh.nuxtjs.org/ https://www.nuxtjs.cn/
nuxt 渲染流程
在任何 Vue 组件的生命周期内， 只有 beforeCreate 和 created 这两个方法会在 客户端和服务端被调用。其他生命周期函数仅在客户端被调用。
![]()
asyncData 方法
https://zh.nuxtjs.org/api/
用于在渲染组件之前异步获取数据，在服务端或路由更新之前被调用。在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData 方法来获取数据并返回给当前组件。
注意：由于 asyncData 方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。
asyncData 只在首屏被执行，其它时候相当于 created 或 mounted 在客户端渲染页面。
fetch 方法
在 2.12 版本之前：
fetch 方法用于在渲染页面前填充应用的状态树（store）数据， 与 asyncData 方法类似，不同的是它不会设置组件的数据。
警告: 您无法在内部使用 this 获取组件实例，fetch 是在组件初始化之前被调用
在 2.12 版本中，fetch 有大更新，fetch(context)已被弃用，可以在 fetch() 中直接使用 this，参考：https://nuxtjs.org/api/pages-fetch
参考 2：https://juejin.im/post/5ecb813751882543184598fe
https://zh.nuxtjs.org/blog/understanding-how-fetch-works-in-nuxt-2-12/
context
https://zh.nuxtjs.org/api/context
服务端上下文对象，可以在 asyncData fetch plugins middlewares modules store/nuxtServerInit 等特殊的 Nuxt 生命周期区域中使用
nuxt 配置
配置启动端口
以下两者都可以配置启动端口
第一种
nuxt.config.js :
module.exports = {
server: {
port: 8000,
host: '127.0.0.1'
}
}
|
第二种
package.json :
"config": {
"nuxt": {
"port": "8000",
"host": "127.0.0.1"
}
},
|
引入 element-ui
修改 nuxt.config.js
module.exports = {
plugins: ['@/plugins/element-ui'],
transpile: [/^element-ui/]
}
|
创建 plugins/element-ui.js
import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element)
|
环境变量
https://zh.nuxtjs.org/api/configuration-env
package.json
{
"scripts": {
"dev": "nuxt",
"build:test": "cross-env BASE_URL=testxxx nuxt build",
"build:production": "cross-env BASE_URL=productionxxx nuxt build"
}
}
|
nuxt.config.js
module.exports = {
env: {
baseUrl: process.env.BASE_URL
}
}
|
我们可以通过以下两种方式来使用 baseUrl 变量：
通过 process.env.baseUrl
通过 context.env.baseUrl
自定义路由配置
在 Nuxt.js 中，路由是基于文件结构自动生成，无需配置。自动生成的路由配置可在 .nuxt/router.js 中查看。
配置路由以 .html 结尾
nuxt.config.js
export default {
router: {
middleware: 'router',
extendRoutes(routes, resolve) {
routes.push({
name: 'case',
path: '/case.html',
component: resolve(__dirname, 'pages/case/_id.vue')
})
routes.forEach((element) => {
let path = element.path
if (path !== '/' && !path.includes('.html')) {
path = path + '.html'
element.path = path
}
})
}
}
}
|
axios 配置
使用 Axios，并配置全局拦截器，处理跨域
安装依赖
npm install @nuxtjs/axios @nuxtjs/proxy --save
|
module.exports = {
modules: ['@nuxtjs/axios'],
axios: {
proxy: true,
prefix: '/api',
credentials: true
},
proxy: {
'/api/': {
target: 'http://127.0.0.1:8080',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
|
组件中使用
<script>
export default {
asyncData ({ app, $axios }) {
console.log(app.$axios)
},
created () {
console.log(this.$axios)
}
}
</script>
|
设置全局拦截器：新建一个/plugins/axios.js
export default function ({ $axios }) {
const axios = $axios
axios.defaults.timeout = 10000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.onRequest((config) => {})
axios.onResponse((res) => {})
axios.onError((error) => {})
}
|
然后在 plugins 配置它
plugins: [
{
src: '@/plugins/axios',
mode: 'client',
},
|
配置 css 预处理器
安装依赖
npm i -D less less-loader
|
无需配置，模板内直接使用
<style lang="less" scoped></style>
|
token 的设置与存储
在前后端分离的项目中，一般都会存放到本地存储中。但 Nuxt.js 不同，由于服务端渲染的特点，部分请求在服务端发起，我们无法获取 localStorage 或 sessionStorage。
可以使用 cookie，并借助 cookie-universal-nuxt 模块（该模块只是帮助我们注入，主要实现依赖 cookie-universal），不管在服务端还是客户端，cookie-universal-nuxt 都为我们提供一致的 api，它内部会帮我们去适配对应的方法。
安装 cookie-universal-nuxt
npm run cookie-universal-nuxt --save
|
nuxt.config.js :
module.exports = {
modules: ['cookie-universal-nuxt']
}
|
访问 $cookies 进行使用：
app.$cookies.get('name')
app.$cookies.set('name', 'value')
app.$cookies.remove('name')
this.$cookies.get('name')
this.$cookies.set('name', 'value')
this.$cookies.remove('name')
|
之后需要改造下 axios，让它在请求时带上验证信息：
/plugins/axios.js :
export default function ({ app: { $axios, $cookies } }) {
$axios.interceptors.request.use((config) => {
config.headers['X-Token'] = $cookies.get('token') || ''
return config
})
$axios.interceptors.response.use((response) => {
if (/^[4|5]/.test(response.status)) {
return Promise.reject(response.statusText)
}
return response.data
})
}
|
middleware 中间件使用
https://zh.nuxtjs.org/api/pages-middleware
全局配置: 这种中间件使用是注入到全局的每个页面中
nuxt.config.js :
module.exports = {
router: {
middleware: ['auth']
}
}
|
如果你希望中间件只运行于某个页面，可以配置页面的 middleware 选项：
export default {
middleware: 'auth'
}
|
使用 keep-alive
https://github.com/nuxt/nuxt.js/tree/dev/examples/with-keep-alive
layouts/default.vue:
直接给 Nuxt 添加 keep-alive 虽然可以实现页面缓存，但是每次页面切换时都会去请求接口
https://juejin.im/post/5cff5f02e51d4510624f97ab
分离 css
nuxt.config.js
build: {
extractCSS: true,
optimization: {
splitChunks: {
chunks: 'all',
},
},
}
|
head 配置
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ name: 'author', content: 'cuilongjin' },
{ 'http-equiv': 'X-UA-Compatible', content: 'IE=edge' },
],
link: [
{
rel: 'icon',
type: 'image/x-icon',
href: '/logo.png',
},
],
script: [
{
src: '/moveheader.js',
},
{
innerHTML: 'console.log('1')'
},
],
__dangerouslyDisableSanitizers: ['script'],
|
添加百度统计代码
在 plugins 目录下新建 baidu.js 文件，内容如下：
注意修改xxxxxxxxxxx编号
if (process.client && process.env.NODE_ENV === 'production') {
var _hmt = _hmt || []
;(function () {
const hm = document.createElement('script')
hm.src = 'https://hm.baidu.com/hm.js?xxxxxxxxxxx'
const s = document.getElementsByTagName('script')[0]
s.parentNode.insertBefore(hm, s)
})()
}
export default ({ app: { router }, store }) => {
if (process.client && process.env.NODE_ENV === 'production') {
router.afterEach((to, from) => {
var _hmt = _hmt || []
;(function () {
const hm = document.createElement('script')
hm.src = 'https://hm.baidu.com/hm.js?xxxxxxxxxxx'
const s = document.getElementsByTagName('script')[0]
s.parentNode.insertBefore(hm, s)
})()
})
}
}
|
在 nuxt-config.js 中添加
plugins: [
{ src: '~plugins/baidu.js', mode: 'client' },
],
|
兼容 ie9 ie10
其他
参考 demo
掘金教程
window.__NUXT__ 如何去掉
vue 实例中 通过 this.$nuxt.context 访问 context
nuxt generate 动态路由配置
nuxt 配置自定义 webpack loader 处理图片 css
