如何使用Vite打包和部署项目到服务器二级路由

阅读本书更多章节>>>>

如果你想把你用Vite构建的项目部署到服务器的二级路由上，比如 http://demo.dev/admin/ ，你需要注意以下几个步骤：

一. 配置基础路径base

基础路径base是指你的项目在服务器上的相对路径，比如你的项目部署在 http://demo.dev/admin/ 上，那么你的基础路径就是 /admin/ 。你需要在两个地方配置基础路径：

配置 vite.config.ts 中的 base 属性。这个属性会影响你的静态资源的引用路径，比如图片，样式，脚本等。你可以在 vite.config.ts 中直接写死 base 的值，也可以通过环境变量来动态设置。配置路由的 history 模式。这个模式会影响你的路由路径，比如你访问 http://demo.dev/admin/login ，那么你需要在路由中指定基础路径为 /admin/ ，否则会出现 404 错误。你可以在 router/index.ts 中使用 import.meta.env.BASE_URL 来获取vite.config.ts 中 设置的 base 值。

通过环境变量配置基础路径

分别在production和development模式下的环境变量中添加基础路径变量，生产环境：.env.production文件，开发环境：.env.development文件

#生产环境VITE_BASE_PATH=/admin/##开发环境VITE_BASE_PATH='/'

vite.config.ts

在配置中添加：

# 函数式写法export default ({ mode }: ConfigEnv): UserConfig => {  // 获取 .env 环境配置文件  const env = loadEnv(mode, process.cwd());  return {    base: env.VITE_BASE_PATH,    ...  }}# 或import dotenv from 'dotenv';dotenv.config({ path: `.env.${process.env.NODE_ENV}` });export default defineConfig({  base: process.env.VITE_BASE_PATH,})

router/index.ts

const router = createRouter({  history: createWebHistory(import.meta.env.VITE_BASE_PATH),  routes})

package.json

"scripts": {    "dev": "NODE_ENV=development vite",    "preview": "vite preview",    "build": "vite build",}# 函数式配置vite.config.ts# "scripts": {#   "dev": "vite serve --mode development",#   "build:prod": "vue-tsc --noEmit && vite build --mode production"# }

打包：

npm run build

二. nginx配置及部署

nginx是一个高性能的HTTP和反向代理服务器，可以用来部署你的Vite项目。你需要在nginx的配置文件中添加以下内容：

server {  listen       80;  server_name  demo.dev;  location /admin {    #二级路由时需要使用别名alias，不用root    alias html/dist/;    index  index.html;    #若不配置try_files，刷新会404    try_files $uri $uri/ /admin/index.html;  }  #后台接口  location /api/ {    proxy_pass http://api.demo.dev/;  }}

这里解释一下几个关键的配置项：

listen：指定监听的端口号，这里是80，你可以根据你的实际情况修改。server_name：指定服务器的域名，这里是demo.dev，也可以修改为你的域名。location /admin：指定二级路由的路径，这里是/admin，要和你的项目基础路径保持一致。alias html/dist/：指定二级路由对应的项目目录，这里是html/dist/，也就是你打包后生成的dist文件夹，要放在nginx的html目录下。try_files $uri $uri/ /web/index.html：指定当请求的资源不存在时，重定向到/admin/index.html，这样可以避免刷新页面时出现404错误。location /api/：指定后台接口的路径，这里是/api/，要和你的项目中请求后台接口的路径保持一致。proxy_pass http://api.demo.dev/：指定后台接口对应的真实地址，这里是http://api.demo.dev/，要根据你的实际情况修改。

配置好nginx后，重启nginx服务，然后就可以在浏览器中访问 
http://demo.dev/admin/
 查看你的项目了。

Vite基础路径指令配置原理

在vite当中，官方提供了一些内置环境变量，其中就包括 BASE_URL，该值默认为 /，在项目文件中，必须通过 import.meta.env.xxx 的方式调用环境变量，此处为 import.meta.env.BASE_URL，之后，vite会将 import.meta.env.BASE_URL 替换为内置的BASE_URL的值，并可以通过指令：--base 设置BASE_URL的值

使用npm运行脚本时可以传递参数，在package.json中添加指令：

demo: vite build --mode production

运行npm run demo时等同于vite build --mode production
运行npm run demo -- --base /admin/时等同于vite build --mode production --base /admin/

但是-- --有两个--，使用起来不太方便，于是改进一下指令：

demo: vite build --mode production --base

运行npm run demo --base /admin/时等同于vite build --mode production --base /admin/

转载：如何使用Vite打包和部署项目到服务器二级路由 - 初心

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-19/160274.html，文章来源：网络cs，作者：焦糖，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！