Quickly Configure Uniapp Page Routing and Static Assets in 3 Minutes

Key Operations

1. Understand Uniapp core directories (four essentials)

pages: stores each page in its own folder.

static: stores static resources such as images and fonts, referenced directly.

pages.json: defines page routes and navigation bar configuration.

manifest.json: global project configuration (AppID, multi‑platform settings).

2. Add a page and configure its route

Create a new page via the IDE: right‑click the pages folder, choose “New Page”, enter a name (e.g., my ), check “Create page directory”, and click “Create”.

Open pages.json and add the new page object to the pages array (the IDE can generate it automatically, then you may edit).

Make the new page the default by moving its entry to the first position of the pages array, save, and run the project.

3. Reference static resources (image example)

Place the image file in the static folder, e.g., static/avatar.jpg .

In the page markup, reference the image. Two ways are shown; the first is recommended:

Method 1 (recommended): ~@/static/avatar.jpg – “~@” maps to the project root.

Method 2: relative path such as ../../static/avatar.jpg, which requires careful handling of the page’s directory depth.

Core Code (copy‑and‑paste ready)

1. Page routing configuration (pages.json)

// pages.json core configuration (simplified)
{
  "pages": [
    {
      "path": "pages/my/my",
      "style": {
        "navigationBarTitleText": "我的页面",
        "navigationBarBackgroundColor": "#ffffff",
        "navigationBarTextStyle": "black"
      }
    },
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "globalStyle": {
    "backgroundColor": "#f5f5f5"
  }
}

2. Static image reference (my.vue)

<template>
  <view class="my-container">
    <!-- Method 1: recommended, ~@ points to project root -->
    <image src="~@/static/avatar.jpg" mode="widthFix"></image>
    <!-- Method 2: relative path (be aware of the page’s folder) -->
    <image src="../../static/avatar.jpg" mode="widthFix"></image>
  </view>
</template>

<style scoped>
.my-container {
  padding: 20rpx; /* Uniapp recommends rpx for multi‑platform responsiveness */
}
image {
  width: 100%;
}
</style>

Common Pitfalls

❌ Images not showing – verify the path; the static folder cannot contain nested sub‑folders unless you use the full path.

❌ New page not appearing – ensure the page is listed in pages.json and that the path matches the folder name.

✅ Navigation bar style changes take effect immediately after saving; no project restart is required.