几种前端web应用部署方式比较

1.直接部署静态页面

项目代码只有一个index.html

将网站文件放在nginx的www目录中即可访问

浏览器查看效果

浏览器查看源代码

总结：

1.跳转新页面，浏览器要重新发起请求，网速慢的时候用户体验不好。

2.用户能直接查看到代码，安全性不足。

2.单页面应用

使用vue router创建一个单页面应用

同样，直接放到nginx的www中

浏览器查看效果

浏览器查看源代码

总结：

1.单页面应用（spa），开始时请求所有数据，前端路由控制页面跳转，跳转页面的时候用户体验好。

2.用户依然能够直接查看代码。

3.使用vue cli创建项目

3.1 npm run serve

npm run serve (vue-cli-service serve) 命令会启动一个开发服务器。

浏览器运行效果

浏览器查看源代码

 

3.2 vue-cli-service build

vue-cli-service build （vue-cli-service build）会在 dist/ 目录产生一个可用于生产环境的包，放到nginx的www中。

浏览器运行效果（和 3.1 相同）

总结：

1.使用 vue cli 的两种方式效果基本相同，只是一个用于开发环境，一个用于生产环境。

2.两种都不能直接查看到源代码

3.SEO很差

4.使用nuxt创建项目

服务端渲染

4.1 universal 模式

4.1.1 npm run dev (nuxt), 启动一个开发服务器

4.1.2 npm run build + npm run start  (nuxt build + nuxt start) 启动一个生产环境服务器

4.1.3 generate (nuxt generate) 会在 dist/ 目录产生一个可用于生产环境的包，放到nginx的www中。

总结：

1.不是单页面应用，每次跳转重新请求。

2.两种生产环境的部署方式，build+start启动一个服务器的方式是访问时渲染，适合自己用服务器部署的方式；generate是提前渲染好所有的成为静态页面，适合使用github page等静态服务器部署的方式。

4.2 spa 模式

没有服务器端渲染（只有客户端路由导航等）。效果和4.1类似，生成的sitemap只有一个url，搜索引擎在收录时也只收录一个页面。所以一般情况都使用universal模式。spa模式相当于虽然用了 nuxt 但是做的是 vue cli 就能实现的工作。