一、开发界面访问空白
当访问某个界面出现空白时，请按以下步骤排查：
- 打开该页面对应的视图文件（
.vue 文件）
- 检查
<template> 节点内的代码结构
- 确保模板中只有一个根节点，多余的同级节点必须合并到根节点内部
⚠️ 注意：注释也是一个标签节点，会影响模板结构的判断。
错误示例 ×
1
2
3
4
5
| <template>
<!-- 注释也是一个标签节点 -->
<div></div>
<div></div>
</template>
|
正确示例 √
1
2
3
4
5
6
7
| <template>
<div>
<!-- 注释也是一个标签节点 -->
<div></div>
<div></div>
</div>
</template>
|
二、pnpm 安装 npm 包不成功
问题原因
由于网络问题或地理位置限制，直接从 npm 官方仓库下载包可能速度极慢或无法访问。
解决方案
使用 nrm 工具管理 npm 镜像源，无需手动编辑配置文件。
1. 安装 nrm（以管理员身份运行 CMD）
1
| npm install -g nrm --registry https://registry.npmmirror.com
|
2. 列出所有可用的镜像源
显示结果如下（* 表示当前使用的源）：
1
2
3
4
5
6
| npm ---------- https://registry.npmjs.org/
yarn --------- https://registry.yarnpkg.com/
tencent ------ https://mirrors.cloud.tencent.com/npm/
cnpm --------- https://r.cnpmjs.org/
* taobao ------- https://registry.npmmirror.com/
npmMirror ---- https://skimdb.npmjs.com/registry/
|
3. 切换到淘宝镜像源
三、页面访问正常，刷新后 404 错误
问题原因
单页应用（SPA）的路由由客户端 JavaScript 处理，刷新页面时浏览器向服务器请求当前 URL，但服务器上并不存在该路径对应的文件。
解决方案
在服务器上添加回退路由，将所有不匹配静态资源的请求重定向到 index.html。
Nginx 配置
1
2
3
| location / {
try_files $uri $uri/ /index.html;
}
|
IIS 配置
- 安装 IIS UrlRewrite 扩展
- 在网站根目录下创建
web.config 文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Handle History Mode and custom 404/500" stopProcessing="true">
<match url="(.*)" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
|
💡 参考来源：Vue Router - 不同的历史记录模式
#中台/常见问题 #中台/配置文件 #中台/搭建项目框架 #Windows #中台/搭建网关