@deppon/deppon-vite-scripts
v2.2.1
Published
Vite starter for Vue projects
Readme
@deppon/deppon-vite-scripts
Vue 项目 Vite 启动器
安装
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 中添加脚本
{
"scripts": {
"start": "deppon-vite start",
"build": "deppon-vite build"
}
}2. 创建配置文件 deppon.config.js
在项目根目录创建 deppon.config.js 文件：
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 文件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>4. 运行命令
开发模式
npm run start
# 或
deppon-vite start生产构建
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）
在项目根目录执行：
# 构建所有包
npm run build
# 发布版本（会自动更新版本号）
npm run publish:version
# 发布到 npm
npm run publish:remote或者使用一键发布：
npm run release方式二：单独发布此包
cd packages/deppon-vite-scripts
# 构建
npm run build
# 发布（需要先登录 npm）
npm publish注意事项
- 确保 Node.js 版本 >= 14.0.0
- 配置文件名称必须是
deppon.config.js - 入口文件默认查找顺序：
src/main.ts>src/main.js - 如果使用 TypeScript，建议使用
defineConfig函数以获得类型提示 - HTML 模板文件需要在项目根目录，文件名为
index.html
许可证
ISC