# @deppon/deppon-vite-scripts
Vue 项目 Vite 启动器
## 安装
```bash
npm install @deppon/deppon-vite-scripts --save-dev
# 或
yarn add @deppon/deppon-vite-scripts --dev
# 或
pnpm add @deppon/deppon-vite-scripts --dev
```
## 使用方法
### 1. 在 package.json 中添加脚本
```json
{
"scripts": {
"start": "deppon-vite start",
"build": "deppon-vite build"
}
}
```
### 2. 创建配置文件 `deppon.config.js`
在项目根目录创建 `deppon.config.js` 文件：
```javascript
const path = require('path');
const { defineConfig, loadEnv } = require('@deppon/deppon-vite-scripts');
module.exports = defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), '');
return {
// 入口文件，默认为 src/main.ts 或 src/main.js
entry: 'src/main.ts',
// 公共路径
publicPath: '/',
// 开发服务器配置
devServer: {
port: Number(env.VITE_PORT) || 3100,
host: env.VITE_HOST || '0.0.0.0',
https: false,
openPage: '/',
// 是否自动打开浏览器
open: true,
allowedHosts:
env.VITE_ALLOWED_HOSTS === 'false'
? false
: env.VITE_ALLOWED_HOSTS
? env.VITE_ALLOWED_HOSTS.split(',')
.map(item => item.trim())
.filter(Boolean)
: [],
},
// 别名配置
alias: {
'@': path.resolve(__dirname, 'src'),
},
// Less 变量覆盖
modifyVars: {
'@primary-color': '#1890ff',
},
// 自定义 vite 配置
vite: config => {
// 可以在这里修改 vite 配置
return config;
},
// 允许注入到 import.meta.env 的变量前缀
envPrefix: ['VITE_', 'DP_'],
// 是否启用 sourcemap
sourcemap: false,
// 错误监控配置（如果启用，会自动开启 sourcemap）
errorMonitor: {
// 监控配置
},
// 是否启用 UnoCSS
unocss: false,
};
});
// 可在项目根目录创建 .env（模板提供 .example.env），例如：
// VITE_PORT=3100
// VITE_HOST=0.0.0.0
// VITE_ALLOWED_HOSTS=
```
> ⚠️ **关于 sourcemap**：开启 `errorMonitor` 时会强制打开生产构建的 `sourcemap`，用于还原上报的堆栈。请在部署流程中将生成的 `.map` 文件上传到监控平台后妥善处理（如删除或阻止公网访问），避免源码暴露。如果业务不需要错误监控，可直接禁用 `errorMonitor` 或显式将 `sourcemap` 设为 `false`。
### 3. 创建 `index.html`
在项目根目录创建 `index.html` 文件：
```html
My App
```
### 4. 运行命令
#### 开发模式
```bash
npm run start
# 或
deppon-vite start
```
#### 生产构建
```bash
npm run build
# 或
deppon-vite build
```
## 项目结构要求
```
your-project/
├── src/
│ ├── main.ts (或 main.js) # 入口文件
│ └── ...
├── index.html # HTML 模板
├── deppon.config.js # 配置文件
└── package.json
```
## 功能特性
- ✅ 支持 Vue 3 + TypeScript
- ✅ 支持 Less/CSS
- ✅ 支持 PostCSS 和 UnoCSS
- ✅ 支持热更新 (HMR)
- ✅ 支持代码分割和懒加载
- ✅ 支持环境变量 (.env)
- ✅ 支持 Source Map
- ✅ 支持错误监控集成
- ✅ 基于 Vite，构建速度更快
## 配置选项
详细配置选项请参考 TypeScript 类型定义 `typings/index.d.ts`
## 与 webpack 版本的差异
- 使用 Vite 作为构建工具，开发体验更快
- 配置文件使用 `vite` 而不是 `webpack` 进行自定义配置
- HTML 模板需要在项目根目录的 `index.html`，而不是 `public/index.html`
- 入口文件默认为 `src/main.ts` 或 `src/main.js`
## 发布到 npm
### 方式一：使用 Lerna（推荐，适用于 monorepo）
在项目根目录执行：
```bash
# 构建所有包
npm run build
# 发布版本（会自动更新版本号）
npm run publish:version
# 发布到 npm
npm run publish:remote
```
或者使用一键发布：
```bash
npm run release
```
### 方式二：单独发布此包
```bash
cd packages/deppon-vite-scripts
# 构建
npm run build
# 发布（需要先登录 npm）
npm publish
```
## 注意事项
1. 确保 Node.js 版本 >= 14.0.0
2. 配置文件名称必须是 `deppon.config.js`
3. 入口文件默认查找顺序：`src/main.ts` > `src/main.js`
4. 如果使用 TypeScript，建议使用 `defineConfig` 函数以获得类型提示
5. HTML 模板文件需要在项目根目录，文件名为 `index.html`
## 许可证
ISC