nuxt.js踩过的那些坑！！！！！

前言

为了实现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'