Deployment FAQ

This page covers frequently asked questions about deploying uni-app applications.

Platform-specific Deployment

How to deploy to WeChat Mini Program?

1. Build the project

   npm run build:mp-weixin

2. Open WeChat Developer Tools

   • Import the dist/build/mp-weixin directory
   • Configure AppID in manifest.json
   • Test and submit for review

3. Common issues

   • Ensure all APIs used are supported by WeChat Mini Program
   • Check domain whitelist configuration
   • Verify component compatibility

How to deploy to Alipay Mini Program?

1. Build the project

   npm run build:mp-alipay

2. Open Alipay Mini Program Studio

   • Import the dist/build/mp-alipay directory
   • Configure AppID and other settings
   • Test functionality

How to deploy to H5 (Web)?

1. Build the project

   npm run build:h5

2. Deploy to web server

   • Upload dist/build/h5 directory to your web server
   • Configure routing (for SPA mode)
   • Set up HTTPS if needed

3. Router configuration

   // For history mode, configure server redirects
   // Apache .htaccess example:
   RewriteEngine On
   RewriteRule ^(?!.*\.).*$ /index.html [L]

How to deploy to App (iOS/Android)?

1. Build the project

   npm run build:app-plus

2. Use HBuilderX for packaging

   • Open project in HBuilderX
   • Configure App icons and splash screens
   • Set up certificates and signatures
   • Generate installation packages

Cloud Deployment

How to deploy using uniCloud?

1. Initialize uniCloud

   # Create cloud functions directory
   mkdir uniCloud-aliyun
   # or
   mkdir uniCloud-tcb

2. Configure cloud functions

   • Create cloud functions in HBuilderX
   • Upload and deploy functions
   • Configure database and storage

3. Frontend integration

   // Initialize uniCloud
   const db = uniCloud.database()
   
   // Call cloud functions
   uniCloud.callFunction({
     name: 'functionName',
     data: {}
   })

How to use CDN for static resources?

1. Configure publicPath

   // vue.config.js
   module.exports = {
     publicPath: process.env.NODE_ENV === 'production' 
       ? 'https://cdn.example.com/' 
       : '/'
   }

2. Upload static files

   • Build the project
   • Upload static files to CDN
   • Update resource references

Environment Configuration

How to configure different environments?

1. Create environment files

   .env.development
   .env.production
   .env.staging

2. Environment variables

   # .env.production
   VUE_APP_API_URL=https://api.production.com
   VUE_APP_ENV=production

3. Use in code

   const apiUrl = process.env.VUE_APP_API_URL

How to handle cross-platform differences?

1. Conditional compilation

   // #ifdef H5
   // H5-specific code
   // #endif
   
   // #ifdef MP-WEIXIN
   // WeChat Mini Program specific code
   // #endif

2. Platform detection

   // Check current platform
   if (uni.getSystemInfoSync().platform === 'ios') {
     // iOS specific logic
   }

Performance Optimization

How to optimize bundle size?

1. Enable tree shaking

   // vue.config.js
   module.exports = {
     configureWebpack: {
       optimization: {
         usedExports: true
       }
     }
   }

2. Code splitting

   // Use dynamic imports
   const LazyComponent = () => import('./LazyComponent.vue')

3. Remove unused dependencies

   npm prune
   # or use webpack-bundle-analyzer
   npm install --save-dev webpack-bundle-analyzer

How to implement lazy loading?

1. Page-level lazy loading

   // pages.json
   {
     "pages": [
       {
         "path": "pages/index/index",
         "style": {
           "enablePullDownRefresh": false
         }
       }
     ],
     "subPackages": [
       {
         "root": "pages/sub",
         "pages": [
           {
             "path": "detail/detail"
           }
         ]
       }
     ]
   }

2. Component lazy loading

   export default {
     components: {
       LazyComponent: () => import('./LazyComponent.vue')
     }
   }

Security Considerations

How to secure API endpoints?

1. Use HTTPS

   • Always use HTTPS in production
   • Configure SSL certificates properly

2. API authentication

   // Add authentication headers
   uni.request({
     url: 'https://api.example.com/data',
     header: {
       'Authorization': 'Bearer ' + token
     }
   })

3. Input validation

   • Validate all user inputs
   • Sanitize data before processing

How to handle sensitive data?

1. Environment variables

   • Store sensitive data in environment variables
   • Never commit secrets to version control

2. Secure storage

   // Use secure storage for sensitive data
   uni.setStorageSync('token', encryptedToken)

Troubleshooting

Common deployment errors

1. Build failures

   • Check Node.js version compatibility
   • Clear node_modules and reinstall
   • Verify all dependencies are installed

2. Runtime errors

   • Check console for error messages
   • Verify API endpoints are accessible
   • Test on different devices/platforms

3. Performance issues

   • Optimize images and assets
   • Implement proper caching strategies
   • Monitor network requests

How to debug production issues?

1. Enable source maps

   // vue.config.js
   module.exports = {
     productionSourceMap: true
   }

2. Error tracking

   // Global error handler
   Vue.config.errorHandler = (err, vm, info) => {
     console.error('Global error:', err, info)
     // Send to error tracking service
   }

3. Logging

   // Conditional logging
   if (process.env.NODE_ENV === 'development') {
     console.log('Debug info:', data)
   }

Best Practices

Deployment checklist

• [ ] Test on all target platforms
• [ ] Optimize images and assets
• [ ] Configure proper caching headers
• [ ] Set up error monitoring
• [ ] Verify SSL certificates
• [ ] Test offline functionality
• [ ] Check performance metrics
• [ ] Validate accessibility
• [ ] Review security settings
• [ ] Backup deployment artifacts

Continuous Integration

1. Set up CI/CD pipeline

   # GitHub Actions example
   name: Deploy
   on:
     push:
       branches: [main]
   jobs:
     deploy:
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v2
         - name: Setup Node.js
           uses: actions/setup-node@v2
           with:
             node-version: '16'
         - name: Install dependencies
           run: npm ci
         - name: Build
           run: npm run build
         - name: Deploy
           run: npm run deploy

2. Automated testing

   • Unit tests
   • Integration tests
   • End-to-end tests

For more deployment-related questions, please check our community forum or contact us.