文章目录
- 先用官方的命令，新建一个nuxt项目
- 改造目录
- 在根目录新建src文件夹，将文件夹都剪切到src中，
- 配置nuxt.config.js
- 配置router.js
- 配置eslint
- 项目迁移
- 安装插件
- 配置别名
- 文件迁移
- 配置插件（我们自己封装的install插件）
- 配置环境，以及不同的环境下打包到不同的目录
- 修改package.josn里面的命令
- 修改nuxt.config.js
- nuxtjs中使用高德地图
- nuxt.js 中常遇到的问题
- 1. 服务期直接访问没有设置链接的页面（例如秘密页面）的路由/app/add-url,报404错
- 2.不识别window,sessionStorage解决方法
- 3.兼容
普通的单页面应用是不能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-routerhttps://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以及以上了
