普通的单页面应用是不能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以及以上了

Logo

前往低代码交流专区

更多推荐