FAQ

Blank Page on Development View

Whichever view appears blank, open the view file of the previously accessed menu and check the code inside the <template></template> node. Ensure there is only one root node; move any extra sibling nodes inside the root node.

Incorrect example ×

<template>
  <!-- A comment is also a tag node -->
  <div></div>
  <div></div>
</template>

Correct example √

<template>
  <div>
    <!-- A comment is also a tag node -->
    <div></div>
    <div></div>
    ...
  </div>
</template>

pnpm npm Package Installation Failure

The reason for pnpm failing to install npm packages may be due to network issues or geographic location. Sometimes downloading packages from the official registry can be slow, or some packages may be inaccessible in the official registry.

To solve this problem, open cmd as administrator and install nrm, which makes it easy to switch between different npm mirror sources without manually editing npm configuration files.

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

List all available mirror sources with 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/

Use the Taobao mirror source with nrm

nrm use taobao

Use nrm ls to verify the active mirror source

  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/

Page Works Normally but Refresh Results in 404 Error

To solve this problem, you need to add a simple fallback route on your server. If the URL doesn't match any static resource, it should serve the same page as your application's index.html.

• nginx

location / {
  try_files $uri $uri/ /index.html;
}

• IIS (Internet Information Services)

Install IIS UrlRewrite

Create a web.config file in the root directory of your website with the following content:

<?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>

Solution reference from Vue Router History Mode