Vue3 npm run build后使用http-server 查看dist文件效果

### Vue3 使用 `npm run build` 构建项目的步骤 #### 配置环境变量 为了确保生产环境中API请求能够正确指向目标服务器，在`.env.production`文件中设置相应的环境变量。例如，可以定义`VUE_APP_BASE_API`来指定接口的基础路径[^3]。 ```bash # .env.production 文件内容示例 VUE_APP_BASE_API=https://api.example.com/ ``` #### 安装依赖包 如果遇到任何构建错误，尝试删除`node_modules`以及`package-lock.json`这两个文件夹和文件后再重新安装所有的依赖项。这一步可以帮助解决由于版本冲突或其他原因引起的潜在问题[^4]。 ```bash rm -rf node_modules package-lock.json npm install ``` #### 修改组件导入方式以优化性能 对于存在复杂嵌套关系的多个子组件场景下，建议采用按需加载（懒加载）的方式来减少初次加载时间并防止可能出现的循环引用问题。比如原本直接同步引入的方式： ```javascript // 原始写法 import ModelPopup from '@/views/component/model'; ``` 改为异步动态导入形式： ```javascript const ModelPopup = () => import('@/views/component/model'); ``` 这种改动有助于提高应用的整体效率，并且能有效规避某些特定条件下发生的编译卡顿现象[^2]。 #### 执行构建命令 当一切准备就绪之后，可以通过执行下面这条简单的指令来进行最终的产品级打包操作： ```bash npm run build ``` 此过程会依据配置自动生成适用于生产的静态资源文件到默认输出目录(`dist`)内，这些文件可以直接部署至Web服务器供线上访问使用[^1]。