vue 项目是多页面应用 存在包体积大 首屏初始化比较久的问题 因此从三个方面进行优化
1.服务器进行压缩传输的 使用压缩传输(.gak) ------图片走cdn 资源走cdn 增加宽带流量
2.vue 初始化时间减少 减小单包体积 每个页面就是一个vue 的实例
3.单个页面 调转可以使用a标签 调转进行配置 a.href="/movement/applyfor" 自定匹配路由前的路径
4.配置页面里的路由(/questionnaire/questionReport 匹配不到静态的资源)
{
path: "/questionnaire",
name: "questionnaire",
meta: {
title: "测评问卷",
},
component: (resolve) => require(["@/page/question/questionnaire"], resolve),
},
{
path: "/questionnaire/questionReport",
name: "questionReport",
meta: {
title: "我的饮食方案",
},
component: (resolve) => require(["@/page/question/questionReport"], resolve),
},
在root 配置下
/etc/nginx/conf.d
vim triageh5-7007.conf
检测配置
/usr/sbin/nginx -t
nginx 重启
/usr/sbin/nginx -s reload
nginx 配置(单页面)
// 默认路由 /
#location / {
// root 根目录地址
# root /home/application/deploy/triage/triage_H5;
// 目录文件 index.html
# index index.html;
// 历史路由
# try_files $uri $uri/ /;
#}
access_log /home/application/logs/triage-module/triageh5.access.log;
// 接受错误日志
error_log /home/application/logs/triage-module/triageh5.error.log;
nginx 配置(多页面)
// 信息内容配置
location ^~/message {
// 别名
alias /home/application/deploy/triage/message;
// 默认文件
index index.html;
// 历史路由配置内容
try_files $uri $uri/ /message/index.html;
// 开启压缩
gzip on;
// 最小字节
gzip_min_length 1k;
gzip_buffers 4 16k;
// 传输版本1.1
gzip_http_version 1.1;
gzip_comp_level 5;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json;
gzip_disable "MSIE [1-6]\.";
gzip_vary on;
}