@deppon/deppon-vite-scripts

@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

注意事项

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