Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
S
ssr-pc
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
tangjiale
ssr-pc
Commits
3c985c1a
Commit
3c985c1a
authored
Apr 09, 2022
by
tangjiale
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
更新文档
parent
1c6bda55
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
73 additions
and
2 deletions
+73
-2
README.md
README.md
+70
-0
dev.config.json
config/dev.config.json
+1
-1
pro.config.json
config/pro.config.json
+2
-1
No files found.
README.md
0 → 100644
View file @
3c985c1a
<!--
*
@Author: tangjiale
*
@eMail: 932055106@qq.com
*
@Date: 2022-04-09 08:44:08
*
@LastEditors: tangjiale
*
@LastEditTime: 2022-04-09 11:17:11
-->
# 为什么选择nuxt框架? (nuxt.js官网:https://zh.nuxtjs.org/ 当前选用版本为2.9.2)
-
1.由于历史原因,需要封装新的框架/封装业务组件,基于 "轻量简洁" "统一复用" 提高代码的可读性维护性,提高开发者编码效率,减轻开发者编码时间压力。
-
2.基于以往的工作经历 并且 通过 '体质健康/中考等项目(后台)' '跳绳商品详情(h5 => 混合app/公众号/:可联调微信/支付宝)' 'ssr-pc (pc/m 站)'实践,Nuxt.js基本满足各端业务需求。
-
3.(主)nuxt可以做到spa和ssr统一风格,对于一些多端的业务迁移比较友好,多端可复用一套框架,维护成本低。
-
4.封装的webpack打包配置基本满足业务需求,框架也预留了一些钩子,符合开放-封闭原则,可扩展性强。
# nuxt.js 分为 spa单页应用客户端渲染/ssr动态路由后端渲染
-
spa (适用于后台/h5混合app等)
1.
客户端渲染、数据传输量小、减少服务器端压力、交互/响应速度快、前后端完全分离。
2.
`首屏加载慢、对SEO不友好,不利于百度,360等搜索引擎收录快照。`
-
SSR (适用于PC/m站等)
1.
主要是服务(SEO搜索引擎优化),使Web内容被搜素引擎最大化收录,最大化提高权重,带来更多流量。 (服务流量/品牌网站权重)
2.
客户端无需等待所有的 JS 文件加载完成即可看见渲染的业务相关视图 ,实现首屏即刻预览。 (服务用户体验)
3.
`对于开发人员来讲,需要去兼容代码在不同环境的运行 Vue SSR 所需要的服务端环境是 Node,有一些客户端的对象,比如 dom、windows 之类的则无法使用。`
4.
`相对于前后端分离模式下服务器只需要提供静态资源来说,SSR 需要的服务器负载更大,所以在项目中使用 SSR 模式要慎重 (根据访问量定夺)`
# spa框架可参考
中台项目:http://git.xiaobentiyu.cn/qingjiquan/goods-admin-h5.git H5单页应用:http://git.xiaobentiyu.cn/qingjiquan/sport-goods-h5.git
# ssr框架可参考
PC网站:http://git.xiaobentiyu.cn/tangjiale/ssr-pc.git
# nuxt.config.js 核心配置(包含打包部署,具体开发可参考实际项目中的配置) (官方所有配置参考:https://www.wenjiangs.com/doc/nuxt-api-configuration-build)
-
[
env
]
-
spa&ssr 环境变量:目前配置文件分了两个环境,dev对应本地开发/测试环境,pro对应生产/灰度环境
-
[
head
]
-
[
head.meta
]
-
spa&&ssr 设置页面公共的'meta'标签
-
[
head.link
]
-
spa&&ssr 可设置网页 ‘ico’ 图标等标签 => link:
[
{ rel: "icon", href: "img/tjl_favicon.ico" }
]
-
[
head.script
]
-
spa&&ssr 可设置网页引入外部资源js 如需引入微信h5的sdk => script:
[
{src: 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js'}
]
-
[
mode
]
-
spa :
[
val:'spa'
]
表示打包单页应用
-
ssr :
[
val:'universal'
]
表示打包ssr应用
-
[
css
]
-
spa&&ssr 在Nuxtjs里配置全局的 CSS 字体库、本地公共CSS、UI框架CSS。
(每个页面都会被引入) =>
[
'@/static/css/icon-font.css','~/plugins/index.less','element-ui/lib/theme-chalk/index.css'
]
-
[
plugins
]
-
spa&&ssr 使得你可以轻易地为 Nuxt.js 配置使用 Vue.js 插件 (可进行路由中间件、http请求、插件注册等工作)
可参考=> 'http://git.xiaobentiyu.cn/tangjiale/ssr-pc.git' => /plugins/index.js 或 /plugins/axios.js
-
[
router.base
]
-
spa :
[
val:'/html/当前项目所属模块/'
]
可自定义 ‘/html/{模块名}’ 避免各模块url互相干扰 如运动项目-'/html/sport/~' 商城项目-'/html/shops/~'
-
ssr :
[
val:''
]
固定空字符串,因为ssr的路由是要遵循seo那边的要求做的
-
[
router.middleware
]
-
spa&&ssr 例:
[
val:'user'
]
在每页渲染前运行 /middleware/user.js 中间件的逻辑
`常用业务如 每当页面进来需要是否储存userInfo或token,如没有重定向login页面`
`如页面需要处理url带来的参数,也可以在中间件中处理,再加载页面同步最新更新的数据`
-
[
dir.pages
]
-
spa :
[
val:'pages'
]
读取pages目录下固定路由结构 (固定路由,一个页面一个路由访问)
-
ssr :
[
val:'ssr'
]
表示ssr的路由是从ssr目录读取 (可动态配置路由,多个路由指向同一页面)
(1) 多url共用一个页面 如 '/html/a'与'/html/b' 多域名可指向同一页面
(2) 可自定义配置动态路由 1.
`/html/${id}`
2.
`/html/shops-${id}/`
3.
`/html/${id}/${areaId}/`
(3) 可以根据 id 数据的不同 配置动态的seo信息 给不同的页面
\ No newline at end of file
config/dev.config.json
View file @
3c985c1a
{
"env"
:
"dev"
,
"monk"
:
"http://tiyuadmin.youchengzhang.cn"
,
"
pigsy"
:
"http://tiyuadmin.youchengzhang.cn
"
"
other"
:
"http://www.baidu.com
"
}
config/pro.config.json
View file @
3c985c1a
{
"env"
:
"pro"
,
"pigsy"
:
"https://tiyuadmin.youchengzhang.cn"
"pigsy"
:
"https://tiyuadmin.youchengzhang.cn"
,
"other"
:
""
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment