Vue3项目Build后部署在Nginx上F5刷新页面空白或404 环境{callout color="#4def9b"}vue-cli 5.xvue-router 4.xNginx{/callout}综述{callout color="#4d60ef"}使用Vue3项目Vue-router4开发完毕后项目Build打包部署线上环境后，首页能正常访问菜单内点击切换也没有问题，但当你刷新页面后，则出现 404 Not Found，故在此记录一下解决办法{/callout}解决思路{callout color="#f34444"}在与chatGPT进行深刻激烈的探讨后，确定了是Nginx的问题，根据chatGPT的引导进行配置依旧无法解决，刷新页面时访问的资源在服务端找不到，因为此时vue-router设置路由地址被当作url地址，此时的地址路径肯定不是真实存在的，所以出现404现象。之所以出现上面的现象，是因为在nginx配置的根目录/www/wwwroot/dist下面压根没有'XXX/xxx/xxx'这个真实资源存在，这些访问资源都是在js里渲染的。{/callout}服务端nginx的一开始配置如下（假设域名为：www.vvhan.com）： server { listen 80; server_name www.vvhan.com; index index.html; root /www/wwwroot/dist; }如上出现404的原因是由于在这个域名根目录/www/wwwroot/dist下面压根就没有'XXX/xxx/xxx'这个真实目录存在。解决问题在服务端nginx配置里添加vue-route的跳转设置，正确配置如下： server { listen 80; server_name www.vvhan.com; index index.html; root /www/wwwroot/dist; #vue-router配置 location / { try_files $uri $uri/ @router; index index.html; } location @router { rewrite ^.*$ /index.html last; } }{callout color="#efa44d"}重启 nginx 后，问题就迎刃而解了。{/callout}

acme.sh生成自动续费的免费SSL证书 {message type="info" content="acme.sh 实现了 acme 协议，可以从 letsencrypt 生成免费的证书。一个完全用Shell（Unix shell）语言编写的ACME协议客户端，支持ACME v1和ACME v2，只需一个脚本即可生成发布，续订和自动安装SSL证书。"/}安装acme.shcurl https://get.acme.sh | sh把 acme.sh 安装到你的 home 目录下：~/.acme.sh/创建 一个 bash 的 aliasalias acme.sh=~/.acme.sh/acme.sh执行完毕后，将自动为你生成 crontab 任务，每天 0:00 点自动检测所有的证书, 如果快过期了，需要更新，则会自动更新证书。生成证书acme.sh 实现了 acme 协议支持的所有验证协议。一般有两种方式验证： http 和 dns 验证，这里我们以 http 为例。http 方式需要在你的网站根目录下放置一个文件，来验证你的域名所有权，完成验证，然后就可以生成证书了。acme.sh --issue -d mydomain.com -d www.mydomain.com --webroot /home/wwwroot/mydomain.com/只需要指定域名，并指定域名所在的网站根目录，acme.sh 会全自动的生成验证文件，并放到网站的根目录，然后自动完成验证，最后会聪明的删除验证文件，整个过程对网站没有任何影响。如果你用的 apache/nginx 服务器，acme.sh 还可以智能的从配置中自动完成验证, 你不需要指定网站根目录：Apacheacme.sh --issue -d mydomain.com --apacheNginxacme.sh --issue -d mydomain.com --nginxcopy/安装证书前面证书生成以后，接下来需要把证书 copy 到真正需要用它的地方。Apacheacme.sh --install-cert -d example.com \ --cert-file /usr/local/apache/domain.cert \ --key-file /usr/local/apache/domain.key \ --fullchain-file /usr/local/apache/domain.pem \ --reloadcmd "service apache2 force-reload"Nginxacme.sh --install-cert -d example.com \ --key-file /usr/local/nginx/cert/domain.key \ --fullchain-file /usr/local/nginx/cert/domain.pem \ --reloadcmd "service nginx force-reload"service nginx force-reload 将会重启 nginx ，centos7 以上使用 systemctl 命令修改配置此处以 nginx 配置为例server { listen 80; server_name mydomain.com www.mydomain.com; return 301 https://$server_name$request_uri; } server { listen 443 ssl; server_name mydomain.com www.mydomain.com; ssl_certificate /usr/local/nginx/cert/domain.pem; ssl_certificate_key /usr/local/nginx/cert/domain.key; location / { root /home/wwwroot/mydomain.com/public; index index.html; } }更新证书{callout color="#f0ad4e"}证书会自动更新，无需关心{/callout}相关链接{callout color="#5466e8"}Github：https://github.com/acmesh-official/acme.sh{/callout}

Akina for Typecho 使用介绍 本篇文章我将介绍如何去更好的了解使用 Akina for Typecho 模板，感受它独特的灵魂和魅力。使用前我应该做什么请将akina\images\avatar.jpg替换为自己头像 全局使用QQ头像将Akina\images\donate内收款图片替换为自己的收款码，（当然不替换也行）在后台设置-评论 允许使用<img src="">标签 ，否则将不能正常使用表情。主题层面关闭反垃圾保护、启用分页、将第一页作为默认显示、将较新的的评论显示在前面。主题层面评论允许img标签关于表情因为每个人的域名都是不一样的，为了适应这个，表情链接不能够写死。博主修改了相关js使其自动获取网站地址，但是这样改完后仅且只能使用图标包，即“img”标签主题自带一种表情包，可仿照其格式自行添加表情。主页（hmoe.php）设置Akina 提供了一个独特的首页页面在博客后台-设置-阅读-站点首页选择直接调用 hmoe.php模板文件，并勾选 同时将文章列表页路径更改为/blog（当然可以改成其他的，但要同时修改模板里路径home.php）其他页面在管理-独立页面-新增页面中友链必须为links.html结尾。关于必须为about.html结尾。留言必须为message.html结尾。归档必须为archives.html结尾。自定义模板选择名字相同模板（如多没有选择page），建议配置伪静态。typecho伪静态apache配置<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php [L,E=PATH_INFO:$1] </IfModule>nginx配置server { listen 80; server_name yourdomain.com; root /home/yourdomain/www/; index index.html index.htm index.php; if (!-e $request_filename) { rewrite ^(.*)$ /index.php$1 last; } location ~ .*\.php(\/.*)*$ { include fastcgi.conf; fastcgi_pass 127.0.0.1:9000; } access_log logs/yourdomain.log combined; }之后在后台 设置->永久连接->启用地址重写功能->选择wordpress风格 即可友链写法!!! <br/> <div class="links"> <ul class="link-items fontSmooth"> <li class="link-item"><a class="link-item-inner effect-apollo" href="http://zhebk.cn/" title="我们，渺小到不可一世。" target="_blank" ><span class="sitename">纸盒博客</span><div class="linkdes">我们，渺小到不可一世。</div></a></li> ...... </ul> </div> !!!画廊图片写法!!! <a href="大图片地址" alt="说明" title="标题"><img class="aligncenter" src="小图片地址" alt="说明"></a> !!!下载按钮写法!!! <p> <a id="download_link" class="download" href="下载url" rel="external" target="_blank" title="下载地址"> <span><i class="iconfont icon-download"></i>点击下载</span> </a> </p> !!!标签样式#H1标签##H2标签###H3标签####H4标签#####H5标签后台模板设置提供网站副标题、DNS预解析加速、CDN镜像加速、备案号 等信息填写特别注意 使用CDN镜像加速时请在CDN服务商提供的空间内创建AkinaCDN文件夹，然后将主题目录的css、fonts、images、js文件夹及其下文件完整上传。最后在后台模板设置按提示填写域名即可。提示：劣质CDN甚至会拖慢网站的速度，CDN付费用户注意，该操作会让你的钱包遭受不可逆的降维打击。使用技巧在文章编辑里添加自定义字段 img 后面跟图片链接。可自定义页面(除了归档)的顶部图片,默认随机使用Akina\images\postbg下图片。在文章编辑里添加自定义字段 dt 后面不填。可开启动态式文章展示样式。使用动态样式时，文章首页不会看见标题，默认显示文章的前70个字符，可使用<!--more-->摘要分割线自定义显示内容。文章小火花触发条件：阅读量大于等于1000。有些独立页面如果不想让它在导航栏显示，增加一个自定义字段navbar并把字段值改为hide即可