当前位置：首页 > news >正文

Vue3 学习教程，从入门到精通，Vue3 项目打包语法知识点及案例代码（9）

news 2025/7/19 6:16:57

Vue3 项目打包语法知识点及案例代码

一、打包前的准备工作

1. 确保项目已创建

确保你已经创建了一个 Vue3 项目。如果尚未创建，可以使用以下命令创建：

npm init vue@latest

然后按照提示完成项目创建。

2. 安装项目依赖

进入项目目录并安装所有依赖：

cd 你的项目名
npm install

二、打包命令

1. 基本打包命令

在项目根目录下运行以下命令进行打包：

npm run build

执行该命令后，项目会被打包到 dist 目录下。

2. 打包结果

打包完成后，dist 目录一般包含以下内容：

index.html：项目的主 HTML 文件。
assets：包含打包后的静态资源，如 JavaScript、CSS 和图片等。

三、打包配置

1. 配置 `vite.config.js`

你可以在 vite.config.js 文件中配置打包的相关选项。例如，设置打包的基路径：

import { defineConfig } from 'vite'export default defineConfig({base: './', // 设置打包后的基路径// 其他配置...
})

如果你的项目需要部署到一个特定的子路径下，可以将 base 设置为该路径，例如 /my-project/。

2. 环境变量

你可以在 .env 文件中设置环境变量，这些变量会在打包时被替换为实际值。例如：

VITE_API_URL=https://api.example.com

在代码中，你可以通过 import.meta.env.VITE_API_URL 来访问这个变量。

四、打包后的文件结构

1. `dist` 目录结构

dist/
├── index.html
└── assets/├── js/├── css/└── images/

2. 修改 `index.html` 文件

如果直接双击打开 dist/index.html 文件，页面可能是空白的。这是因为文件中的资源路径是绝对路径。你需要将这些路径修改为相对路径。例如：

<link href="/static/css/app.css" rel="stylesheet">
<script type="text/javascript" src="/static/js/app.js"></script>

修改为：

<link href="static/css/app.css" rel="stylesheet">
<script type="text/javascript" src="static/js/app.js"></script>

这样，你就可以直接通过双击 index.html 文件在浏览器中查看效果。

五、部署

1. 部署到本地服务器

你可以使用简单的 HTTP 服务器来测试打包后的项目。例如，使用 http-server：

npm install -g http-server
http-server dist

然后在浏览器中访问 http://localhost:8080。

2. 部署到 GitHub Pages

安装 gh-pages 插件：

npm install --save-dev gh-pages

修改 vite.config.js 文件，设置 base 为你的仓库名称：

export default defineConfig({base: '/your-repo-name/',
})

修改 package.json 文件，添加 deploy 脚本：

"scripts": {"dev": "vite","build": "vite build","preview": "vite preview","deploy": "gh-pages -d dist"
}

运行部署命令：

npm run deploy

进入 GitHub 仓库设置，找到 Pages 选项，设置分支为 gh-pages，然后访问生成的 URL。

3. 部署到 Nginx 服务器

将 dist 目录上传到服务器的指定目录，例如 /var/www/html/your-project。
配置 Nginx，确保它指向正确的目录：

server {listen 80;server_name your-domain.com;location / {root /var/www/html/your-project;try_files $uri /index.html;}
}

重启 Nginx 服务：

sudo systemctl restart nginx

六、案例代码

案例一：简单的 Vue3 项目打包

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue3 项目打包示例</title>
</head>
<body><div id="app"><h1>{{ message }}</h1><button @click="increment">点击 {{ count }}</button></div><script type="module">import { createApp, ref } from 'vue'const App = {setup() {const message = ref('Hello, Vue3!')const count = ref(0)const increment = () => {count.value++}return {message,count,increment}}}createApp(App).mount('#app')</script>
</body>
</html>

案例二：使用 Vue Router 的项目打包

安装 Vue Router：

npm install vue-router@next

创建路由配置文件 router/index.js：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
]const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes
})export default router

在 main.js 中使用路由：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'const app = createApp(App)
app.use(router)
app.mount('#app')

创建视图组件 views/Home.vue 和 views/About.vue：

<!-- Home.vue -->
<template><div><h1>首页</h1><router-link to="/about">去关于页</router-link></div>
</template><script>
export default {name: 'Home'
}
</script>

<!-- About.vue -->
<template><div><h1>关于页</h1><router-link to="/">回首页</router-link></div>
</template><script>
export default {name: 'About'
}
</script>

在 App.vue 中使用 <router-view>：

<template><div id="app"><router-view /></div>
</template><script>
export default {name: 'App'
}
</script>

打包项目：

npm run build

通过以上步骤，你可以成功打包一个 Vue3 项目，并将其部署到不同的环境中。这些知识点和案例代码将帮助你更好地理解和应用 Vue3 项目打包的过程。

注意

七、完整构建命令

7.1 常用命令

# 开发模式
npm run dev# 生产构建
npm run build# 预览生产包
npm run preview# 指定环境构建
npm run build -- --mode staging# 分析构建产物
npm run build -- --report

7.2 package.json配置

{"scripts": {"dev": "vite","build": "vite build","preview": "vite preview","build:analyze": "vite build --mode production --report"}
}

八、项目结构建议

├── dist/                 # 构建输出目录
├── public/               # 纯静态资源
│   └── favicon.ico
├── src/
│   ├── assets/           # 需要处理的资源
│   ├── components/       # 公共组件
│   ├── router/           # 路由配置
│   ├── stores/           # 状态管理
│   ├── views/            # 页面组件
│   ├── App.vue
│   └── main.js
├── .env.development      # 开发环境变量
├── .env.production       # 生产环境变量
└── vite.config.js        # 构建配置文件