关于在本地去模拟生产环境检测页面内容注意事项

一、前置准备（避免打包/启动报错）

确认已安装依赖：

若项目未装 serve（静态服务器），先全局安装：
powershell 复制代码
```
npm install -g serve
```
（若安装失败，可加 --registry https://registry.npm.taobao.org 用淘宝源）

接口代理修改（核心）：

找到项目中 axios 实例配置文件（通常是 src/utils/request.js 或 src/api/request.js），替换为：

javascript 复制代码

import axios from 'axios'
// 临时修改为（模拟生产环境，直接指向后端真实接口）
const service = axios.create({
  baseURL: 'http://172.20.35.20:8081', // 后端接口基地址（替换原代理地址）
  timeout: 5000,
  // 可选：补充通用请求头（若后端需要）
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  }
})
// 保留原有请求/响应拦截器（若有）
export default service

静态资源路径配置（关键！避免打包后资源404）：

找到项目的打包配置文件（Vue项目为 vue.config.js，Vite项目为 vite.config.js，React项目为 package.json/webpack.config.js），确保静态资源根路径为 /：
- Vue2/Vue3（vue.config.js）：
  javascript 复制代码
```
module.exports = {
  publicPath: '/', // 核心：静态资源根路径（必须改为/，否则serve启动后资源加载失败）
  outputDir: 'dist' // 打包输出目录（默认dist，保持一致）
}
```
- Vite（vite.config.js）：
  javascript 复制代码
```
export default defineConfig({
  base: '/', // 静态资源根路径
  build: {
    outDir: 'dist'
  }
})
```
- React（package.json）：
  确保 homepage 字段为 /（若无则新增）：
  json 复制代码
```
"homepage": "/"
```

二、打包+启动静态服务器（PowerShell 环境）

执行生产环境打包：
powershell 复制代码
```
npm run build:prod
```
✅ 检查：打包完成后确认 dist 目录生成，且内部有 index.html、static/js/css 等文件。
切换到打包输出目录：
powershell 复制代码
```
cd dist
```
❗ 异常处理：若提示"找不到路径"，检查打包命令是否成功，或手动进入项目根目录下的 dist 文件夹。
临时允许当前PowerShell会话运行脚本（仅本次会话有效，无安全风险）：
powershell 复制代码
```
Set-ExecutionPolicy -ExecutionPolicy Bypass -Scope Process
```
❗ 异常处理：若提示"权限不足"，以管理员身份打开PowerShell再执行。
启动serve静态服务器（-s 表示单页应用模式，适配Vue/React路由）：
powershell 复制代码
```
serve -s .
```
✅ 成功标志：终端输出 Local: http://localhost:3000（端口可能不同），浏览器访问该地址即可正常访问项目，且接口能直接调用 http://172.20.35.20:8081。

三、补充注意事项（核心避坑点）

跨域问题：

若访问 localhost:3000 时接口报跨域，需让后端在 http://172.20.35.20:8081 服务中配置CORS（允许 localhost:3000 跨域），或在后端服务器上部署前端dist文件（同域名访问，无跨域）。
端口冲突：

若 serve -s . 提示端口被占用，可指定端口启动：
powershell 复制代码
```
serve -s . -l 8080 # 用8080端口启动
```
打包后接口地址固化：

本次修改是"临时硬编码"，若需要区分环境（开发/测试/生产），建议用环境变量配置（如 .env.prod 文件），避免每次打包改代码：
- 创建 .env.prod 文件：
  复制代码
```
VITE_API_BASE_URL=http://172.20.35.20:8081 # Vite项目
# 或 Vue项目：VUE_APP_API_BASE_URL=http://172.20.35.20:8081
```
- axios配置中读取环境变量：
  javascript 复制代码
```
const service = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL, // Vite
  // baseURL: process.env.VUE_APP_API_BASE_URL, // Vue
  timeout: 5000
})
```
PowerShell 兼容性：

若用的是旧版PowerShell（如5.1以下），可能不支持部分命令，建议升级PowerShell或改用CMD执行（CMD无需执行 Set-ExecutionPolicy，直接 serve -s . 即可）。
静态资源校验：

打包后打开 dist/index.html 若页面空白，检查控制台是否有404（大概率是 publicPath/base 未设为 /），或打包时遗漏资源（重新执行 npm run build:prod）。