nuxt + ant-design-vue + less + es6 + webpack + express (seo,ssr)

框架集成：nuxt + ant-design-vue + less + node + Express + webpack + es6

前言：这是一个基于服务端渲染的基础框架，可在下方Git地址获取源代码
Github： https://github.com/liu-ian/nuxt-ant-design-vue
Nuxt 进阶篇：https://blog.csdn.net/q2235141/article/details/103156683

Nuxt笔记：

1.asyncData 只能在pages组件使用 ，在服务端组件渲染之前被调用，最终与属性Data一起返回数据给组件

import ...
//返回promise 
asyncData ({params,error}){
   return axios.get(`https://my-api/posts/${params.id}`).then((res) => {
       return {data: res.data}
   }).catch((e) => {
       error({statusCode: 404,message: 'not find'})
   })
}

//async,await
async asyncData ({params}){
    let {data} = await axios.get(`https://my-api/posts/${params.id}`)
    return {data}
}

//使用回调函数
asyncData ({params}, callback){
   axios.get(`https://my-api/posts/${params.id}`).then((res) => {
       callback(null, {data: res.data})
   }).catch((e) => {
       callback({statusCode: 404,message: 'Get not find'}) // 自动执行error函数
   })
}

2.fetch 只操作store，不返回组件数据

//改变setStars
fetch ({ store, params }) {
    return axios.get('http://my-api/stars')
    .then((res) => {
        store.commit('setStars', res.data)
    })
}

3.@nuxt/axios 跨域代理

 /**
  * 跨域代理
  */
modules: ['@nuxtjs/axios'],
axios: {
    proxy: process.env.NODE_ENV === 'development', // 是否使用代理
    // prefix: '',
    credentials: true
},
proxy: {
    '/api/user/image': {
       target: (process.env.NODE_ENV === 'development') ? 							'http://192.168.91.201' : 'http://192.168.91.203',
       changeOrigin: true,
       pathRewrite: {'': ''}
        }
}

4.vuex会随着浏览器刷新数据丢失，使用localStorage、sessionStorage、cookie

5.nuxt.config.js 引入antd.less 覆盖主题变量

module.exports = {  
	build:{
         extend (config, {isDev, isClient}) {
	       config.module.rules.push({
	         test: /\.less$/,
	         use: [{
	           loader: 'less-loader',
	           options: {
	             modifyVars: {
	               'primary-color': '#2EA9DF', // 自定义 ant-design-vue 主题颜色
	               'link-color': '#2EA9DF',
	               'border-radius-base': '2px'
	             },
	             javascriptEnabled: true
	            }
	          }]
       	 })    
    }}
}

6.加载图片：nuxt默认将assets里面小于1KB的图片转base64，大于1KB的图片手动放在static静态资源目录进行加载(否则报错404)

7.部署所需：.nuxt、api、nuxt.config.js、package.json

8.pm2: pm2 start ./node_modules/nuxt/bin/nuxt.js --name projectName – start