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/
最新文章
- Configure the max limit for concurrent TCP connections(转)
- BZOJ3678: wangxz与OJ
- javascript模块简单写法
- BZOJ 1189 [HNOI2007]紧急疏散evacuate
- javascript + jquery函数大全
- [转]Visual Studio 2010 单元测试目录
- SQL Server 执行计划中的扫描方式举例说明
- linux ubuntu 安装jdk
- Linux Epoll介绍和程序实例
- mysql服务的注册,启动、停止、注销。 [delphi代码实现]
- 【二分+最大团】【HDU3585】【maximum shortest distance】
- session校验是否登录
- 关于开发中使用writeToFile时的注意事项
- Java中==与equals()的区别
- Linux(Ubuntu)换apt-get源
- 关于爬虫中常见的两个网页解析工具的分析 —— lxml / xpath 与 bs4 / BeautifulSoup
- 【Java】经典示例代码
- 轻量级Config文件AppSettings节点编辑帮助类
- 在Spring Boot中使用Spring-data-jpa实现分页查询(转)
- 如何禁止审查元素扒代码(F12)
热门文章
- Java实现简单薪水计算器相关操作代码
- 启动项目报错org.yaml.snakeyaml.scanner.ScannerException: while scanning for the next token found character ‘@‘
- ES-DSL
- seql sever INSERT语句简介
- java之路总结
- Pytest 固件
- js树搜索框查询所有匹配节点及父节点(纯js实现)
- vue-表格拖拽
- react 本地 DevServer启动之后找不到静态资源404
- Spyder无法使用搜狗输入中文的解决办法