Admin

外观

常见问题 ​

开发界面访问空白 ​

哪一个访问界面出现空白，就打开上一个访问菜单的视图文件，检查 <template></template> 节点内代码，确保只有一个跟节点，多余的同级节点移动到跟节点内

错误示例 ×

vue
<template>
  <!-- 注释也是一个标签节点  -->
  <div></div>
  <div></div>
</template>

正确示例 √

vue
<template>
  <div>
    <!-- 注释也是一个标签节点  -->
    <div></div>
    <div></div>
    ...
  </div>
</template>

pnpm 安装 npm 包不成功 ​

pnpm 安装 npm 包不成功的原因，由于网络问题或者地理位置的原因，有时候从官方仓库下载包可能会很慢，或者某些包在官方仓库中可能无法访问。

解决这个问题，可以打开 cmd 右键菜单以管理员身份运行后安装 nrm，方便在不同的 npm 镜像源之间切换，无需手动编辑 npm 的配置文件

npm install -g nrm --registry https://registry.npmmirror.com

通过 nrm 列出所有可用的镜像源

nrm ls
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/

通过 nrm 使用淘宝的镜像源

nrm use taobao

使用 nrm ls 查看使用的镜像源

  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/

页面访问正常，刷新404错误 ​

要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源，它应提供与你的应用程序中的 index.html 相同的页面。

  • nginx
location / {
  try_files $uri $uri/ /index.html;
}
  • IIS (Internet Information Services)

安装 IIS UrlRewrite

在网站的根目录下创建一个web.config文件，内容如下：

xml
<?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 不同的历史记录模式