YouTipVue3 Taskhub Production
## Project Deployment
After refining our TaskHub project through previous chapters, its functionality is now very complete. Now we need to take the final step: **deploying it from a local development environment to a production server**.
In enterprise-level implementations, we must ensure that the code can automatically switch configurations between different environments (testing, production), and load extremely fast.
* * *
## Environment Variable Management: One Codebase, Multiple Environments
In real-world development, API addresses or some configurations differ between the development and production environments.
Vite supports `.env` files by default.
Create two files in your project's root directory:
**`.env.development` (Local Development)**
VITE_API_BASE_URL=http://localhost:3000/api
VITE_APP_TITLE=TaskHub (Dev)
**`.env.production` (Production)**
VITE_API_BASE_URL=https://api.taskhub.com
VITE_APP_TITLE=TaskHub
**Explanation:**
* Vite requires variables to start with **`VITE_`** in order to be exposed to client-side code.
* Access them in code using `import.meta.env.VITE_API_BASE_URL`.
* * *
## Packaging Optimization: Maximum Loading Speed
When projects include libraries like Vue Router and Pinia, the generated `index.js` file becomes very large. We need to optimize it via "code splitting" and "compression".
### Code Splitting Strategy (Manual Chunks)
Modify `vite.config.js` to bundle third-party libraries into separate JS files for browser caching.
## Example
```js
// vite.config.js
export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks: {
// Bundle Vue-related libraries together
'vue-vendor': ['vue', 'vue-router', 'pinia'],
// Other third-party libraries (e.g., axios or echarts in the future)
// 'utils-vendor': ['axios'],
}
}
}
}
})
### Gzip Compression Configuration
Install plugin: `npm install -D vite-plugin-compression`
## Example
```js
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
plugins: [
// ...
viteCompression({
threshold: 10240, // Compress files larger than 10kb
algorithm: 'gzip',
ext: '.gz'
})
]
})
* * *
## Automated Deployment (CI/CD)
Using the most popular tool **GitHub Actions** as an example, when you push code to GitHub, it will automatically package and deploy it to GitHub Pages or your own server.
### Create Workflow Script
Create `.github/workflows/deploy.yml` in your project root:
```yaml
name: Deploy TaskHub
on:
push:
branches: # Watch for pushes to the main branch
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout 🛎️
uses: actions/checkout@v4
- name: Install and Build 🔧
run: |
npm install
npm run build
- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@v4
with:
folder: dist # Directory of built artifacts
branch: gh-pages # Deploy to this branch
* * *
## Containerization with Docker (Advanced)
If your company uses container clouds, you'll need a `Dockerfile`. It ensures that your TaskHub runs identically across any server.
Create `Dockerfile` in the root directory:
```dockerfile
# 1. Use Nginx image as base
FROM nginx:alpine
# 2. Copy the built dist directory to Nginx static resources directory
COPY dist/ /usr/share/nginx/html/
# 3. Copy custom nginx config (to fix 404s in single-page app routing)
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
* * *
## Full Roadmap Summary of the TaskHub Project
At this point, you have completed an enterprise-level practical project based on **Vue 3 (JavaScript) + Tailwind v4**, starting from scratch:
1. **Architecture Layer**: Vite + Tailwind v4 + Vue Router + Pinia.
2. **Logic Layer**: Composition API + Custom Composables for reuse.
3. **Performance Layer**: shallowRef + v-memo + bundling & chunking.
4. **Engineering Layer**: Environment variables + CI/CD automated deployment.
The full project directory structure:
src/
├── assets/ # Static resources
├── components/ # Reusable atomic components (Header, Input, Item, Filter)
├── composables/ # Custom logic hooks (useLocalStorage, useNotification)
├── router/ # Route configuration and guard permissions
├── stores/ # Pinia state store (TaskStore)
├── views/ # Page-level components (Dashboard, Login)
├── App.vue # Global container and page transition animations
└── main.js # Entry point of the application
Relevant commands:
```bash
# Install dependencies
npm install
# Local development
npm run dev
# Production build
npm run build