一、生产环境：
1、?安装Node.js?
版本要求：Node.js 18.3+（推荐20.x LTS）25
验证安装：
node -v # 显示v20.x+
npm -v # 显示10.x+
?包管理器选择?
npm（Node自带）
pnpm（推荐高效替代）：
npm install -g pnpm
2、?构建工具选择?
Vite（推荐）：新一代极速构建工具，冷启动快10倍
Vue CLI（传统）：适合存量项目升级
二、建立VUE项目：
方案1：Vite极速搭建（2025主流）
npm create vue@latest # 交互式配置选择:ml-citation{ref="4,8" data="citationList"}
配置选项示例：
? 项目名称：my-vue3-project
? 使用TypeScript：Yes
? 添加Vue Router：Yes
? 添加Pinia状态管理：Yes
方案2：Vue CLI传统方案
npm install -g @vue/cli
vue create vue3-legacy-project # 手动选择配置:ml-citation{ref="2,7" data="citationList"}
三、高度VUE项目
在程序目录CMD进入命令窗后输入：npm run dev
四、目录结构
src/
├── assets/ # 静态资源
├── components/ # 通用组件
├── views/ # 页面级组件
├── router/ # 路由配置（需vue-router@4）:ml-citation{ref="4" data="citationList"}
├── store/ # Pinia状态管理（替代Vuex）:ml-citation{ref="4" data="citationList"}
├── App.vue # 根组件
└── main.ts # TypeScript入口文件:ml-citation{ref="3,4" data="citationList"}
五、关键配置
?Vite优化配置?
在vite.config.ts中设置：
typescript：
export default defineConfig({
base: '/subdir/', // 二级目录部署需匹配服务器路径:ml-citation{ref="5" data="citationList"}
build: {
minify: 'terser', // 代码压缩
chunkSizeWarningLimit: 1500 // 分包大小阈值:ml-citation{ref="5" data="citationList"}
}
})
?路由配置?
在router/index.ts中启用history模式：
typescript：
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),:ml-citation{ref="4" data="citationList"}
routes: [...]
})
五、启动与构建
npm run dev # 开发模式启动:ml-citation{ref="3,7" data="citationList"}
npm run build # 生产环境构建（生成dist目录）:ml-citation{ref="5" data="citationList"}
六、IIS发布及绑定IIS
1、进入到VUE项目目录，在地址栏输入cmd打开命令窗
2、输入npm run build 对当前项目打包
3、打包完成后，当前项目下会建立一个名称为“dist”的文件夹，将网站绑定到dist文件夹即可
七、部分异常处理
1、vite异常或找不到时？
# 进入项目目录后执行
npm install vite --save-dev # 安装最新版Vite到开发依赖:ml-citation{ref="1,2" data="citationList"}