FrontEnd - IIS部署Vue3项目

是萝卜干呀

已于 2023-12-04 11:42:11 修改

阅读量429

点赞数

文章标签：前端分布式 npm vscode vue

于 2023-09-12 11:11:49 首次发布

本文链接：https://blog.csdn.net/xiaoxiaoluobogan/article/details/132825977

版权

一、打包 vue3 项目

1. 涉及的主要文件（了解）

（1）package.json 文件

（2）vite.config.prod.ts 文件

（3）.env.production 文件

2. 打包（操作）

（1）在.env.production文件中，设置后端运行 API 。

（2）终端执行命令，并耐心等待，会在根目录下新增个文件夹 dist。

一、打包 vue3 项目

1. 涉及的主要文件（了解）

（1）package.json 文件

// 在执行 npm run build 时，会执行下方"build"对应的指令
"scripts": {
    "dev": "vite --force --host --config ./lyconfig/vite.config.dev.ts",  // 即 develop，开发环境
    "build": "vite build --config ./lyconfig/vite.config.prod.ts",  // 即 production，正式环境
    ...
},

（2）vite.config.prod.ts 文件

主要用于 vite+ts+vue3 的环境变量和模式配置。

（3）.env.production 文件

VITE_API_BASE_URL= 'http://XX.XX.XXX.XXX:8000' # 设置后端 API server

2. 打包（操作）

（1）在.env.production文件中，设置后端运行 API 。

VITE_API_BASE_URL= 'http://XX.XXX.X.X'

（2）终端执行命令，并耐心等待，会在根目录下新增个文件夹 dist。

# 终端
npm run build

二、设置 IIS 服务器

1. 打开 IIS 服务功能

在桌面导航栏的左下角 "四个方框图案"左击 > "设置" > " 应用程式" > "应用程式和功能 " > 滑动页面找到"相关设定"（程式和功能） > "开启或关闭Windows功能" > 勾选 Internet Information Services（只需勾选部分，即点击勾选时，系统推荐勾选的部分） > 并勾选 "Internet Information Services 可装载的Web核心"。