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+vite 项目打包及部署到服务器二级路由的更多相关文章
- React项目打包并部署到 Github 展示预览效果
React项目打包并部署到 Github 展示预览效果 当开发者模式结束,准备打包的时进行以下步骤: 在package.json配置文件中加一句: "homepage": &quo ...
- Java项目使用 Tomcat 部署 Linux 服务器
一.安装 Java 环境 1 下载 jdk 8 yum -y install java-1.8.0-openjdk java-1.8.0-openjdk-devel 设置 centos7 环境变量 v ...
- 项目通过tomcat部署到服务器,请求数据中文乱码问题
问题: 本地项目请求访问,浏览器中文输出没问题.部署到服务器上面之后,返回到浏览器的中文就乱码了. 尝试办法: 1.修改tomcat下的conf中的service.xml中的配置信息: 重新启动后,没 ...
- nginx+uwsgi+django+virtualenv+supervisor部署web服务器
wsgi 全称web server gateway interface,wsgi不是服务器,也不是python模块,只是一种协议,描述web server如何和web application通信的规则 ...
- 高级运维(四):Nginx常见问题处理、安装部署Tomcat服务器、使用Tomcat部署虚拟主机
一.Nginx常见问题处理 目标: 本案例要求对Nginx服务器进行适当优化,以提升服务器的处理性能: 1> 不显示Nginx软件版本号 2> 如果客户端访问服务器提示“Too many ...
- 项目打包 tomcat部署
IDE: IDEA 1.项目maven管理先执行 clean,再执行 compile 2.如果编译compile不成功,则将 C:\Users\Administrator\.m2\repository ...
- 项目打包 weblogic部署
工作流打包: 由于没有集成单点,配置文件要修改 将webnocas.xml内容复制覆盖 web.xml 到这里修改完毕 选择weblogic项目,右键maven install,生成.ear文 ...
- idea maven项目打包并部署到tomcat
打包 打开Maven管理器,邮寄package,执行Run Maven Build,执行成功后将war包生成到target目录下. 部署 1.将war包复制到tomcat安装目录下的webapps目录 ...
- 【Vue】基于nodejs的vue项目打包编译部署
一·项目编译 1·进入项目目录下的终端执行命令 npm run build 正常情况如下图,如遇到错误不会编译成功,且编译后的html文件不能正常渲染. 2·编译完成后进入项目下的dist目录运行生成 ...
- Eclipse中创建新的SpringBoot项目(打包并且部署到tomcat)
Spring-boot因为其对jar包的高度集成以及简化服务配置,快速部署等的优点,逐渐成为Java开发人员的热衷的框架.下面演示一下怎么在Eclipse中新建Spring-boot项目以及打包部署. ...
随机推荐
- node 版本管理
32位版本的node,运行较大的项目,会内存溢出.所以建议安装64位的版本,且运行速度比32位快.node14以下的版本支持node-sass,版本node16以上的不再支持node-sass,而sa ...
- Jmeter九、jmeter中的函数和beanshell
beanshell 松散类型的脚本语言 可在里面自定义函数
- 根据id 删除树结构中的数据
根据id 删除树结构中的数据 filterHandle(data, id) { var newData = data.filter(x => x ...
- Python爬虫之Scrapy框架爬虫实战
Python爬虫中Scrapy框架应用非常广泛,经常被人用于属于挖掘.检测以及自动化测试类项目,为啥说Scrapy框架作为半成品我们又该如何利用好呢 ?下面的实战案例值得大家看看. 目录: 1.Scr ...
- 二维Svg转矢量 不支持Svg2.0
import { ElMessage } from 'element-plus' import { parse } from 'svgson' import JsonToView from './vi ...
- vue 组件之间事件触发($emit)与event Bus($on)的用法说明
组件之间事件触发 新增按钮组件: 操作按钮组合组件: 此时有个需求就是,无论是哪个按钮,如果改变了列表中的数据,列表需要实时更新数据. 此时就需要用到组件间的事件触发. 父子组件之间事件触发可以使用$ ...
- POJ3723 Conscription 题解
start: 2021-08-04 16:56:50 题目链接: http://poj.org/problem?id=3723 题目内容: Description Windy has a countr ...
- Web _Servlet(url-pattern)的配置与优先级
url-pattern的配置方式有三种: 1.完全路径匹配:以 '/' 开始 例: /ServletDemo1 , /aaa/ServletDemo2 , /aa/bb/ServletDemo3 ...
- ES2015常用知识点
ES2015(又称ES6)部分1 let/const以及块作用域:2 循环语句 const arr=[1,2,3]; for(const item of arr){ console.log(item) ...
- JAVA 学习打卡 day1
2022-04-21 21:03:26 1.java程序的注释 (1)单行注释,就是在注释内容前面加双斜线(//) (2)多行注释,就是在注释内容前面以单斜线加一个星形标记(/*)开头,并在注释内容末 ...