Ionic 2生产环境部署至浏览器的方法及FTP上传指引

Great question! Deploying an Ionic 2 app to a web server for production isn’t just copying dev files—let’s walk through the exact process clearly:

1. 先构建生产优化版本的应用 #

你不能直接用ionic serve的开发文件部署，得先生成适合生产的打包产物。在项目根目录运行以下命令：

ionic build browser --prod --release

• --prod：启用生产模式，会自动压缩代码、移除调试信息，大幅减小文件体积并提升运行性能
• --release：生成正式发布版本的构建文件，确保所有依赖都正确打包且无冗余内容

2. 需要上传的文件夹 #

构建完成后，所有生产环境需要的文件都集中在项目的platforms/browser/www/目录下。你需要把这个目录里的所有内容（不是整个platforms文件夹）通过FTP或其他文件传输工具，上传到Web服务器的根目录（或者你指定的子目录，比如/my-ionic-app/）。

3. 指向的索引文件 #

Web服务器的入口文件就是你上传的www目录里的index.html。大多数服务器会自动识别index.html为默认首页，但如果你的服务器没有自动配置，需要手动把这个文件设置为站点的默认入口。

4. 关键补充：SPA路由配置（必做！） #

因为Ionic 2是单页应用（SPA），前端路由由框架自行处理，直接访问子路由（比如yourdomain.com/user/profile）会返回404错误。你需要给服务器添加重写规则：

• Apache服务器：在上传的根目录创建.htaccess文件，添加以下内容：

  <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
  </IfModule>
  

• Nginx服务器：在服务器配置中添加：

  location / {
    try_files $uri $uri/ /index.html;
  }
  

这个配置会把所有非静态文件的请求都转发到index.html，让Ionic的路由系统正常处理页面跳转。

额外注意事项 #

• 若你的应用涉及用户数据或敏感操作，务必确保服务器支持HTTPS
• 检查上传文件的权限，一般设置文件权限为644、文件夹权限为755即可，确保服务器能正常读取这些文件
• 如果你的应用有自定义静态资源路径，提前验证构建后的路径是否正确，生产模式下Ionic会自动处理资源路径，但特殊配置需要额外确认

内容的提问来源于stack exchange，提问作者Luca C.