一文搞定nuxt.js搭建到部署（ssr和静态部署）

    感谢大家的点赞和转发，欢迎大家关注本人的博客。试用期指导，项目开发，简历优化，毕业设计/论文，欢迎添加本人微信。

 新人作者，欢迎关注和收藏👏🏻👏🏻

一、Nuxt 简介

Nuxt 是一个更高级别的 Node.js web 开发框架，用于创建 Vue 应用，可在两种不同模式下开发和部署：通用（SSR）或单页应用（SPA）。此外，您可以在 Nuxt 中将 SSR 和 SPA 部署为静态生成的应用。即使您可以选择 SPA 模式，Nuxt 的全部功能仍在于其通用模式或用于构建通用应用的服务器端渲染（SSR）。通用应用用于描述可以在客户端和服务器端执行的 JavaScript 代码。

为什么要使用 Nuxt？

Nuxt 等框架的存在是因为传统 SPA 的缺点和多页应用（MPAs的服务器端呈现）。我们可以将 Nuxt 视为服务器端渲染 MPA 和传统 SPA 的混合体。因此，它被称为“普遍的”或“同构的”。因此，能够进行服务器端渲染是 Nuxt 的定义特性。

二、什么是SSR？

SSR是服务端渲染：在后台将vue实例渲染为HTML字符串直接返回，在前端激活为交互程序。

实现原理：

1. 客户端发送请求给服务器
2. 服务器查询数据库，使用视图、模板引擎等拼接成html字符串，返回给客户端
3. 客户端渲染html

优点：

1. 网页内容在服务器端渲染完成，一次性传输到浏览器，所以首屏加载速度非常快
2. 有利于SEO，因为服务器返回的是一个完整的html，在浏览器可以看到完整的dom，对于爬虫、百度搜索等引擎就比较友好

缺点：

1. 在后续跳转其它链接时，整个页面还要重复这样的操作，不断地请求响应、请求响应，相对来说，消耗的带宽资源、后续请求的时间就多了

单页应用SPA：

单页应用其优秀的用户体验，使其逐渐成为主流，页面内容由js渲染出来，这种方式称为客户端渲染。它的过程是：

1. 客户端发送请求给服务器
2. 服务器返回html，但这时的html只有基本的结构（比如vue中，只有app这个div结构），没有其他具体的dom结构
3. 客户端渲染html，渲染执行js（比如vuejs），渲染模板template，这时候会再向服务器发送请求，请求具体的数据
4. 服务器查询数据库，返回对应的数据
5. 客户端渲染显示

缺点：

1. 网速很慢的时候，它的首屏等待时间较长
2. SEO不友好，暴露给搜索引擎只有最基本的html结构(比如：<div id="app"></div>)

如何搭建你的nuxt应用

1. yarn create nuxt-app <项目名>

执行完命令后会初始化一个nuxj.js的项目

asset:资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript,图片和css等静态文件都要存放的asset目录下，否则打包之后会出现找不到资源的情况

components：组件目录，用来存放自定义组件的目录，跟一般的vue组件没有区别

layouts：布局目录，可以在里面写默认布局文件，注意默认布局文件的名称必须是default.vue，并且layouts文件夹的目录没有必要的情况下不要更改。注意：default.vue默认是不存在的，如果要改布局需要自己添加

 middleware 目录用于存放应用的中间件。中间件可以理解为经过不同的路由时都会执行的函数，这里我没有使用就不再赘述可以自己看文档https://www.nuxtjs.cn/guide/routing#中间件

pages：页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。若无额外配置，该目录不能被重命名。值得注意的是：nuxt中是不需要你手写路由的，直接在pages里面增加文件夹即可。例如要增加一个路由为news的页面，只需要在pages文件夹里面新建一个news文件夹里面新建一个index.vue文件即可。当然你也可以看到对应的router.js文件

plugins：插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。

注意：在nuxt中使用插件和在一般的vue中是有很大差别的

一般只需要npm 安装对应的包，然后在main.js中引入和使用即可

但是在nuxt中你需要在plugins文件夹中定义对应的js来引入插件，然后再nuxt,config.js中来配置才能使用

例如我要使用element-ui

首先要npm 安装

然后需要再plugins文件夹里面顶一个JS来进行引入和使用，JS的名字随便起

然后在nuxt.config.js中引入这个js，

 对于element这种需要引入css的插件还需要，在nuxt.config.js里面的css配置项里面引入对应的样式库

static:静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。

store 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。

这里和一般的vue项目中使用vuex没什么区别

nuxt.config.js 文件：nuxt.config.js 文件用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置。

这个文件很关键，项目打什么类型的包，以什么方式运行以及一些三方插件库都需要在这里面配置，包括一些SEO优化还有html的头部都是在这里配置。

这里我之说几个关键和常用的配置选项，其他的有兴趣可以去看官网。

ssr配置项，可以设置true和false，j是否启动ssr渲染,ssr:true是默认值

target:static/server,采用静态渲染还是服务端渲染

一般情况下ssr:true与target:server一起使用，然后执行npm run build即可构建一个ssr的包，发布到服务器即可完成ssr。

如果要打一个spa的包只需要设置ssr:false即可，target配置项不需要设置

如果要打一个静态部署的包你需要设置ssr:true,target:static

这些主要是打包的配置

除了这些还有css配置项，是用来引入全局样式的，还有plugin配置项是用来注册插件的。这些就是主要的配置项

三、使用flexable.js和postcss-pxtorem插件来进行PC端的适配

这里主要是做一个官网的项目，所以要针对不通的PC端屏幕进行适配。
我采用的是flexable.js和postcss-pxtorem。我一开始用的是postcss-px2rem后来发现和nuxt引入公共css的时候发生了冲突所以改用了postcss-pxtorem。

先npm 安装包然后定义一个JS在plugins文件夹里面引入

 再在nuxt.config.js里面配置plgins配置项

到这里就完成了对flexable.js的引入和使用。

但是因为flexable.js主要是适配移动端的所以我们要对其源码进行更改

node_modules\lib-flexible\flexible.js文件中

refreshRem方法

下一步就是引入postcss-pxtorem。

build: {
    postcss: {
      plugins: {
        "postcss-pxtorem": {
          rootValue: 192,
          propList: ["*"],
          minPixelValue: 2
        }
      }
    },
  },

这样就完成了适配

四、如何将开发好的nuxt项目部署到服务器上？

（1）ssr渲染：

　　首先来介绍如何进行SSR渲染：开发完成项目之后，将nuxt.confing.js里面的SSR配置项设为false,然后将target配置项设置为：server

　　运行npm run build进行打包

　　打包后会生成.nuxt文件夹

这时候可以先本地执行 npm start 看一下是否正常启动。

启动后看一下网路请求里面的document是否是有内容的html的页面

 如果是就代表SSR本地启动成功了。

这时候咱们需要把它部署到服务器上去。

第一步是连接到你的服务器，这里我用的是mobaXterm

进入服务器之后随便找一个文件夹新建一个文件夹将咱们nuxt项目中的相关文件丢进去

需要丢的有

这里注意最好保证本地node版本和服务器上的一致。

当然你也可以除了node_nodules全部丢进去。

然后在服务器是执行npm start即可，当然你得进入项目所在的文件夹

可以看到在服务器上项目已经跑起来了，这时候你点击listening后面得连接时进不去得因为那是私网的域名。

这时候你需要在nginx上面进行反向代理

server {
      listen 9001;//监听的端口，就是你要访问的端口
      server_name 112.47.58.10;//你的域名
      location / {
      proxy_pass http://localhost:3001;//这里配上代理的端口和域名，针对nuxt咱们只需要该后面的端口就行了因为跑在服务器上代理到本机就行} }

当然你需要把你监听的9001端口在安全组中打开

然后就可以通过http:域名:端口访问了

（1）SPA方式部署：

 将项目部署为普通的spa应用的步骤：

1.设置nuxt.config.js文件中的ssr配置项为false

2.执行npm run generate打包，这里可能会报错xxx is not in cwd,这时你需要找到node_modules@nuxt\cli\dist\cli-generate.js文件修改以下代码

export async function snapshot ({ globbyOptions, ignore, rootDir }) {
  const snapshot = {}
 
  const files = await globby('**/*.*', {
    ...globbyOptions,
    ignore,
    cwd: rootDir,
    absolute: true
  })

把上面的cwd ：rootDir改为 cwd : upath . normalize ( rootDir ) 就好了。

const  files  =  await  globby__default [ 'default' ] ( '**/*.*' ,  { 
    ... globbyOptions , 
    ignore , 
    cwd : upath . normalize ( rootDir ) , 
    absolute : true 
  } ) ;
复制代码

执行完命令会在根目录生成dist文件

样在服务器任意位置新建一个目录，将dist文件夹丢入即可

然后就是进行nginx的配置
可以在已有的.cof文件中新加server，也可以新建一个.cof文件写server

server {
      listen 4567;//监听的端口
      server_name 21.23.18.12;//你的域名或者Ip地址
      location / {
        root /home/nxutsever/dist;  //重定向的目录，就是你的dist文件夹所在的位置
        try_files  $uri $uri/ dist/index.html;//搜索的文件，就是dist下面的index.html
        index  index.html index.htm;//index配置项
      }
    }

配置完成之后重启nginx,在浏览器输入http://ip+:端口号即可访问。

访问之后可以打开网络请求检查一下document文件返回的是什么

 发现只有一个空壳子，说明SPA部署成功了

至此Nuxt的ssr部署和spa部署就结束了。如果本文对各位有帮助，欢迎点赞！

 感谢大家的点赞和转发，欢迎大家关注本人的博客。试用期指导，项目开发，简历优化，毕业设计/论文，欢迎添加本人微信。

 新人作者，欢迎关注和收藏👏🏻👏🏻

 觉得作者写的不错或者心情愉悦的老板也可以投币打赏，感谢观看，希望能给大家带来帮助