nuxtjs打包部署

### Nuxt.js 打包部署教程最佳实践 #### 配置 `nuxt.config.js` 文件 为了组织 Nuxt.js 应用的个性化配置并覆盖默认设置，在项目的根目录下编辑或创建 `nuxt.config.js` 文件。此文件允许自定义应用的行为，如路由模式、加载进度条样式等[^1]。 ```javascript export default { // 全局页面头部信息 head: { title: 'My App', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' } ], link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }] }, // 路由模式 (hash 或 history) router: { mode: 'history' }, // 加载进度条颜色 loading: { color: '#3B8070' } // 更多选项... } ``` #### 修改 `package.json` 中的服务端监听参数 为了让应用程序能够被外部网络访问，在 `package.json` 的 `config` 字段内指定主机地址为 `0.0.0.0` 和端口号为 `3000`，这使得服务可以在所有可用接口上运行，并通过该端口接收请求[^3]。 ```json { "name": "my-nuxt-app", "version": "1.0.0", "private": true, "scripts": {}, "dependencies": {}, "devDependencies": {}, "config": { "nuxt": { "host": "0.0.0.0", "port": "3000" } } } ``` #### 构建生产环境下的静态资源 完成上述配置之后，执行构建命令以生成适合生产的优化后的前端资产： ```bash npm run build && npm start ``` 对于 SSR（服务器端渲染）的应用程序来说，还需要额外启动 Node.js 服务来处理 HTTP 请求；而对于纯静态站点，则可以直接上传至任何支持 HTML/CSS/JS 文件托管的服务提供商处[^4]。 #### 使用 Web Server 进行反向代理 当采用像 NGINX 这样的 web server 来作为反向代理时，可以将来自客户端浏览器发出的目标 URL 映射到本地正在运行的 Nuxt.js 实例所在的 IP 地址与端口组合之上，从而实现透明转发功能[^5]。 NGINX 配置示例如下所示： ```nginx server { listen 80; server_name example.com; location / { proxy_pass http://localhost:3000/; 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; } } ```