前言
为了实现vue项目的服务端渲染,选择用nuxt重构项目。
此记录为,从vue项目迁移到nuxt中遇到的各种坑和解决方案。
1. DOM渲染报错
经由多次实践,有以下几个原因会造成报错:
1.标签格式不规范,如行级标签包裹块级标签;(p标签不能包裹div标签)
2.DOM中有注释的标签代码; (删除注释代码)
3.element-ui插件,ssr默认设置为false; (将ssr设置为true)
这个项目出现问题原因为:
<el-form @submit.native.prevent>
<el-input v-model="keyword" placeholder="请输入搜索关键词" @keyup.enter.native="searchData()"></el-input>
</el-form>
form表单组件,默认只有一个输入框时,按下输入框会默认提交(即会立即刷新页面);在之前的vue项目中为了禁用默认提交操作,在el-input外层加了一个el-form,@submit.native.prevent禁用默认提交。
解决:
<el-input v-model="keyword" placeholder="请输入搜索关键词" @keyup.enter.native="searchData()"></el-input>
<el-input style="display:none"></el-input>
加了一个空的input标签,设置display:none。没有报错了。
2. 添加自定义路由 (沿用vue项目原本的路由)
项目中对于路由参数不复杂的页面,默认用nuxt的路由。
但对于一个路由带了多个参数的页面,用nuxt路由就不得不建多个重复性的页面,不方便维护,且代码也不美观。
如下,自定义路由。用unshift方法添加在nuxt默认路由前面,使其优先匹配。
nuxt.config.js 文件
export default{
router: {
extendRoutes (routes, resolve) {
routes.unshift(
{
name: 'listType',
path: '/shopList/:type.html',
component: resolve('./', 'pages/shopList/index.vue')
},
{
name: 'listSearch',
path: '/shopList/:type/:search.html',
component: resolve('./', 'pages/shopList/index.vue')
},
)
}
},
}
3.环境配置文件
nuxt的ssr模式下,需要定义BASE_URL 地址(因为是服务端获取数据,获取不到window对象)。spa模式可以直接用 /
//.env.prod 文件示例
NODE_ENV = 'production'
BASE_URL = 'https://www.fxxxxx.com'
APP_NAME = 'xxx'
APP_PATH = 'xxx'
APP_BRAND_ID = '2'