0


nginx+vite 项目打包及部署

项目打包及部署到服务器二级路由

例如:我希望将打包的项目部署到 http://localhost:8088/web/

一. 项目配置及打包

**项目部署到服务器二级路由需要配置基础路径

base

,即需要:
1.配置

vite.config.ts

中的基础路径
2.配置路由的基础路径**

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

分别在

production

development

模式下的环境变量中添加基础路径变量,生产环境:

.env.production

文件,开发环境:

.env.development

文件

##生产环境
NODE_ENV='production'
VITE_BASE_PATH=/web/
##开发环境
NODE_ENV='development'
VITE_BASE_PATH='/'

vite.config.ts

在配置中添加:
export default ({ mode }: ConfigEnv): UserConfig => {
  // 获取 .env 环境配置文件
  const env = loadEnv(mode, process.cwd());
  return {
    base: env.VITE_BASE_PATH,
    ...
  }
}

router/index.ts

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

package.json

"scripts": {
  "dev": "vite serve --mode development",
  "build:prod": "vue-tsc --noEmit && vite build --mode production"
}

打包:

npm run build:prod

方式二 通过打包时的指令配置基础路径

不用配置环境变量,vite.config.ts不用配置

base

属性,只需要在

router/index.ts

中添加:

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

为vite内置
package.json

"scripts": {
  "dev": "vite serve --mode development",
  "dev:base": "vite serve --mode development --base",
  "build:prod": "vue-tsc --noEmit && vite build --mode production"
  "build:base": "vue-tsc --noEmit && vite build --mode production --base",
}

打包:

npm run build:base --base /web/

二. nginx配置及部署

server {
  listen       8088;
  server_name  localhost;

  location /web {
    #二级路由时需要使用别名alias,不用root
    alias html/dist/;
    index  index.html;
    #若不配置try_files,刷新会404
    try_files $uri $uri/ /web/index.html;
  }

  #后台接口
  location /prod-api/ {
    proxy_pass http://172.16.20.30:9905/;
  }
}

Vite基础路径指令配置原理

在vite当中,官方提供了一些内置环境变量,其中就包括

BASE_URL

,该值默认为

/

,在项目文件中,必须通过

import.meta.env.xxx

的方式调用环境变量,此处为

import.meta.env.BASE_URL

,之后,vite会将

import.meta.env.BASE_URL

替换为内置的

BASE_URL

的值,并可以通过指令:

--base <path>

设置

BASE_URL

的值

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

demo: vite build --mode production

运行

npm run demo

时等同于

vite build --mode production

运行

npm run demo -- --base /web/

时等同于

vite build --mode production --base /web/

但是

-- --

有两个

--

,使用起来不太方便,于是改进一下指令:

demo: vite build --mode production --base

运行

npm run demo --base /web/

时等同于

vite build --mode production --base /web/
标签: nginx vue.js 前端

本文转载自: https://blog.csdn.net/qq_43519131/article/details/127408209
版权归原作者 菲吻于雪 所有, 如有侵权,请联系我们删除。

“nginx+vite 项目打包及部署”的评论:

还没有评论