Uniapp 页面路由配置（pages.json）完全指南

<think>我们正在处理一个UniApp项目，需要正确配置API请求和打包时的基础路径，以便在Nginx环境下正常运行。根据用户之前的错误，主要是Nginx配置问题导致404，但这里用户关注的是UniApp内部的配置。 从引用中我们可以总结以下几点： 1. UniApp中可以通过`process.env.NODE_ENV`判断开发和生产环境（引用[1]）。 2. 在UniApp中，我们通常使用`uni.request`发起网络请求（引用[2]）。 3. 在开发环境下，我们可以通过配置代理解决跨域问题（引用[3]和引用[4]展示了两种代理配置方式，但注意引用[3]提到Vite和Webpack配置不同，而UniApp的H5开发环境在Vue3下使用Vite，Vue2下使用Webpack）。 4. 生产环境下，我们需要确保请求的API地址正确，并且与Nginx配置相匹配。 用户的需求是：在UniApp中正确编写API请求，并配置打包时manifest.json中的基础路径（即H5的公共路径），以便在Nginx环境下正常访问。 解决方案分两部分： 一、在UniApp中编写API请求 二、配置manifest.json中的基础路径（H5路由模式和公共路径） 详细步骤： 一、编写API请求 1. 根据环境变量切换请求的基地址（baseURL） 2. 使用`uni.request`发送请求 示例代码： 在项目根目录下创建`config.js`，配置不同环境的基地址： ```javascript // config.js let baseURL; if (process.env.NODE_ENV === 'development') { // 开发环境，使用本地代理或后端开发服务器地址 baseURL = '/api'; // 通过代理解决跨域，代理配置在manifest.json中 } else { // 生产环境，使用部署后的API地址（注意：这里应该与Nginx配置的路径匹配） baseURL = 'http://your-domain.com/api'; // 或者相对路径'/api'，取决于Nginx配置 } export default { baseURL }; ``` 在请求模块中（如`request.js`）： ```javascript import config from './config.js'; const request = (options) => { // 如果options.url是绝对路径，则直接使用，否则拼接baseURL if (!options.url.startsWith('http') && !options.url.startsWith('//')) { options.url = config.baseURL + options.url; } return new Promise((resolve, reject) => { uni.request({ ...options, success: (res) => { // 可根据业务需求处理响应 resolve(res.data); }, fail: (err) => { reject(err); } }); }); }; export default request; ``` 在页面中使用： ```javascript import request from '@/utils/request.js'; export default { methods: { async fetchData() { try { const data = await request({ url: '/user/list', // 实际请求的路径，在开发环境下会变成 /api/user/list，生产环境下为 http://your-domain.com/api/user/list method: 'GET' }); console.log(data); } catch (error) { console.error(error); } } } } ``` 二、配置manifest.json中的基础路径 在UniApp项目中，我们需要配置H5的公共路径（base路径）以及代理设置（开发环境）。 1. 打开`manifest.json`，找到`h5`节点，配置`router`的`base`和`mode`，以及`devServer`的代理（用于开发环境跨域）。 示例配置： ```json { "name": "your-app-name", // ...其他配置 "h5": { "devServer": { "port": 8080, // 开发服务器端口 "disableHostCheck": true, // 关闭host检查 "proxy": { "/api": { // 代理前缀，与开发环境baseURL中配置的一致 "target": "http://your-backend-server.com", // 后端服务器地址 "changeOrigin": true, "secure": false, "pathRewrite": { "^/api": "" // 重写路径，将/api去掉（根据后端实际情况，也可以重写成其他路径） } } } }, "router": { "mode": "history", // 或 "hash"，根据Nginx配置选择，如果使用history模式，Nginx需要配置try_files "base": "/" // 基础路径，如果应用部署在子路径下，比如http://your-domain.com/sub/，则这里配置"/sub/" } } } ``` 注意： - 生产环境的公共路径（base）由`router.base`决定，它会影响所有相对路径的资源（如js、css、图片）以及路由的起始路径。 - 在Nginx配置中，如果应用部署在根路径，则Nginx配置的root指向打包后的dist目录；如果部署在子路径，则Nginx配置的location需要匹配该子路径，并且设置root为dist目录，同时确保`router.base`与子路径一致。 三、打包部署 1. 生产环境打包：在HBuilderX中点击“发行”->“网站-H5手机版”，生成静态文件。 2. 将打包后的文件（整个dist目录）部署到Nginx的静态文件目录（如`/usr/share/nginx/html`或`C:\Server\nginx-1.28.0\html`）。 3. 配置Nginx，确保API请求被正确代理到后端服务器（参考之前的Nginx配置）。 四、Nginx配置要点（补充） 在Nginx中，我们需要配置两个部分： 1. 静态资源服务：指向打包后的dist目录。 2. API代理：将/api开头的请求代理到后端服务器。 示例Nginx配置（与UniApp配置对应）： ```nginx server { listen 80; server_name your-domain.com; # 静态资源 location / { root /path/to/dist; # 替换为你的dist目录路径 index index.html index.htm; try_files $uri $uri/ /index.html; # 如果使用history模式需要此配置 } # 代理API请求 location /api/ { proxy_pass http://your-backend-server.com/; # 注意末尾的斜杠，表示移除/api前缀 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } } ``` 注意：在Nginx的`proxy_pass`中，末尾的斜杠很重要，它决定了路径的转换方式。例如，当请求`/api/user`时： - 如果配置为`proxy_pass http://backend.com/;`，则转发为`http://backend.com/user`。 - 如果配置为`proxy_pass http://backend.com;`（无斜杠），则转发为`http://backend.com/api/user`。 因此，请确保Nginx的配置与UniApp中`pathRewrite`的规则一致。在开发环境中，我们通过`pathRewrite`移除了`/api`前缀，生产环境的Nginx配置也应该移除。 总结： - 在UniApp中，通过环境变量配置不同的基地址（baseURL）。 - 开发环境使用manifest.json中的代理配置解决跨域问题。 - 生产环境通过Nginx反向代理API请求，并确保静态资源正确服务。 - 注意manifest.json中H5的base路径和Nginx中静态资源路径的匹配。 这样，无论是在开发环境还是生产环境，API请求都能正确发送，并且静态资源也能正常加载。 引用说明： - 环境判断和API请求写法参考了引用[1]和引用[2]。 - 代理配置参考了引用[3]和引用[4]，但要注意Vite和Webpack的差异（在UniApp中，我们按照官方manifest.json配置即可，构建工具会自动处理）。 如果用户使用的是Vue3（Vite），在开发环境下，UniApp已经做了适配，我们只需要按照manifest.json配置代理即可。 最后，用户需要根据自己的后端API路径和部署环境调整代理规则和Nginx配置。 §§相关问题§§ 1. 在UniApp中如何动态配置不同环境（开发、测试、生产）的API基地址？ 2. 如何解决UniApp在H5平台开发环境下的跨域问题？ 3. 在UniApp中，H5路由使用history模式时，Nginx需要如何配置？ 4. UniApp打包H5时，如何设置公共路径（base）以适应不同的部署目录结构？</think>### UniApp API请求写法及manifest.json基础路径配置指南 #### 一、UniApp API请求标准写法 在UniApp中推荐使用统一封装的`uni.request`方法，并结合环境变量进行动态配置： ```javascript // 创建请求实例（utils/request.js） const baseURL = process.env.NODE_ENV === 'development' ? '/api' // 开发环境使用代理路径 : 'https://your-domain.com/api'; // 生产环境使用真实域名 export const request = (options) => { return new Promise((resolve, reject) => { uni.request({ url: baseURL + options.url, method: options.method || 'GET', data: options.data || {}, header: { 'Content-Type': 'application/json', ...options.headers }, success: (res) => { if (res.statusCode === 200) { resolve(res.data) } else { reject(res.data) } }, fail: (err) => { reject(err) } }) }) } // 在页面中使用（pages/index.vue） import { request } from '@/utils/request' export default { methods: { async fetchData() { try { const res = await request({ url: '/user/info', method: 'POST', data: { userId: 123 } }) console.log('获取数据:', res) } catch (error) { uni.showToast({ title: '请求失败', icon: 'error' }) } } } } ``` #### 二、manifest.json基础路径配置 在`manifest.json`中配置H5部署路径和代理规则： ```json { "name": "your-app-name", "h5": { "devServer": { "disableHostCheck": true, "proxy": { "/api": { "target": "http://your-backend-server.com", // 后端真实地址 "changeOrigin": true, "secure": false, "pathRewrite": { "^/api": "/api" // 保持路径不变 } } } }, "router": { "mode": "history", // 推荐history模式 "base": "/app/" // 部署的子目录路径 }, "publicPath": "./", // 静态资源路径 "title": "应用名称" } } ``` #### 三、关键配置说明 1. **环境区分策略** ```javascript // 开发环境：process.env.NODE_ENV === 'development' // 生产环境：process.env.NODE_ENV === 'production' ``` 2. **路径重写规则** - `pathRewrite: {"^/api": "/api"}` 保持路径不变 - 若需转换路径：`"^/api": "/new-path"` 3. **路由模式选择** - `hash`模式：URL带`#`，兼容性好 - `history`模式：需Nginx配置重定向 4. **公共路径设置** ```json "publicPath": "./" // 相对路径适配子目录部署 ``` #### 四、Nginx生产环境配置示例 ```nginx server { listen 80; server_name your-domain.com; # UniApp静态资源 location /app/ { alias /path/to/uniapp-dist/; try_files $uri $uri/ /app/index.html; } # API代理配置 location /api/ { proxy_pass http://backend-server:8080/; # 末尾斜杠很重要！ proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_redirect off; } } ``` #### 五、验证与调试技巧 1. **环境变量检查** ```javascript // 在App.vue中打印环境变量 mounted() { console.log('当前环境:', process.env.NODE_ENV) console.log('基础URL:', baseURL) } ``` 2. **代理生效验证** ```bash # 开发环境测试请求 curl http://localhost:8080/api/test ``` 3. **打包路径检查** - 打包后检查`dist/build/h5/index.html` - 确认资源路径为相对路径：`<script src="./static/js/app.js"></script>` > 配置要点：开发环境用代理解决跨域，生产环境通过Nginx路径匹配[^4]。使用`uni.request`确保多端兼容性[^2]，Vue3项目需注意vite的特殊配置要求[^3]。