vue-cli3项目改造成nuxt

普通的单页面应用是不能seo的，页面只有一个<div id=“app">标签，此时就需要用到服务端渲染（ssr）了,下面是对已有的vue项目改成vue官方推荐的nuxt项目

先用官方的命令，新建一个nuxt项目

npm init nuxt-app <project-name>

由于我们使用自己的axios所以不选择@nuxt/axios
建好后，目录如下

现在我们为了保持和vue的风格类似，所以需要改造下

改造目录

在根目录新建src文件夹，将文件夹都剪切到src中，

如下图

配置nuxt.config.js

在nuxt.config.js 文件中添加 srcDir: “src/”,这样，目录就调整好了。

配置router.js

在nuxt中router跟vue是不一样的，所以我们需要单独配置，在src目录下新建router.js文件。
https://zh.nuxtjs.org/docs/2.x/features/file-system-routing/#extending-the-router
https://github.com/nuxt-community/router-module
可以参考上面的文档，修改我们的router
安装： @nuxtjs/router： npm install --save-dev @nuxtjs/router
结果如下：

然后 nuxt.config.js 添加如下代码

  generate: {
    routes: [
      '/'
    ]
  },
  buildModules: [
   ...,
   '@nuxtjs/router',
 ],

配置eslint

将原先项目里面的eslint里的rule拷贝过来就行（如果没有eslint的话则不需要配置）

项目迁移

安装插件

将vue项目中所用到的依赖复制到nuxt的package.json (dependencies/devDependencies)
粘贴完成后，安装下 npm i

配置别名

安装完成后，配置别名。尽量和vue项目的别名一致，否则容易出现路径报错
打开 tsconfig.json，paths下面更改成下面这两行
（注意：如果此时项目中有.ts文件，别名报错的情况下，就要注意include：[]下包含的文件是不是没写全）
例如我的项目中include中下面的三行是我自己配置的

	"src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue"

文件迁移

将vue中src下的文件全部复制到nuxt下的src中，
此时有人会问index.html怎么办，别急，接下来我们就讲这个。
在nuxt.config.js中head配置就是index.html的head的公用信息，css是全局的css
参考：https://zh.nuxtjs.org/docs/2.x/directory-structure/nuxt-config/#head

复制过去后，可能会有些图片路径不对，这个时候手动改下就行了。然后运行我们的npm run dev
就可以看到我们的界面啦；

配置插件（我们自己封装的install插件）

在src/plugins文件夹下，将我们的插件Vue.use(XXX),然后在nuxt.config.js中的plugins添加插件的路径;例如我的项目是layers.ts，如下：

这样插件就算添加完成了。

配置环境，以及不同的环境下打包到不同的目录

修改package.josn里面的命令

我们这边配置四个环境（测试环境，生产环境，预发布1和预发布2环境）

修改nuxt.config.js

项目中使用 process.env.baseUrl就可以获取到 接口地址了。
运行npm run dev 打印看下baseUrl

打包到生产环境，运行npm run Release ,将包发到服务器上，此时看到请求的接口地址就会变成http://xxx.production.com了

nuxtjs中使用高德地图

// nuxt.config.js
script: [
      {type:'text/javascript', src:'https://webapi.amap.com/maps?key=xxx'},
]
// page.vue中
if (process.client) {
	// @ts-ignore: 
	this.map = new window.AMap.Map("container", opt)
}

如果出现了下图报错，重新见一个项目就好了

nuxt.js 中常遇到的问题

1. 服务期直接访问没有设置链接的页面（例如秘密页面）的路由/app/add-url,报404错

参考： https://zh.nuxtjs.org/docs/2.x/configuration-glossary/configuration-generate#routes
unxt.config.js

  generate: {
    dir:'dist',
    ...,
    routes: [
      '/',
      ...,
      '/app/add-url'
    ]
  },

2.不识别window,sessionStorage解决方法

使用：process.client
参考： https://zh.nuxtjs.org/docs/2.x/configuration-glossary/configuration-build/#extend

if (process.client) {
     sessionStorage.getItem("language");
     console.log(window)
}

3.兼容

兼容ie： 打包出来的js文件中包含了const，所以在ie上会不兼容，将打包出来的就是文件里面const改成var就可以兼容ie10以及以上了