Vue项目添加前缀,ngnix发布相关修改问题
更新时间：2024年07月05日 10:55:53 作者：小鱼爱曲奇
这篇文章主要介绍了Vue项目添加前缀,ngnix发布相关修改问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
项目场景
本人有个vue前端项目，要对接别人的平台，需要加个前缀，但是这个项目本地也会使用，所以最后希望的效果是加了前缀和未加前缀都是可以使用的。
vue项目加前缀
项目使用的是vue 2.6
静态文件的加前缀
加前缀的方式是使用vue.config.js配置文件，再这个配置文件中，加入publicPath:"/aaa" aaa是前缀。
publicPath是实现静态文件加前缀：
module.exports = {
publicPath: "/aaa",
};
实现的效果：
dist下的index.html文件中的静态文件的引入路径会加上前缀：
<script src="/aaa/js/app.63e0b2dc.js"></script>
路径加前缀
Vue的route中加入base
base:"/aaa" 实现路由加入前缀
路径的跳转会自动带上前缀/aaa
ngnix配置的更改
首先必须清楚ngnix中的alias和root的区别
- root读取的时根目录。可以在server或location指令中使用。
- alias只能在location指令中使用。
location命中后
- 如果是root，会把请求url的
ip/域名+port替换为root指定的目录，访问资源 - 如果是alias，会把请求url的
ip/域名+port+匹配到的路径替换为alias指定的目录，访问资源
举个栗子
若请求的是：http://example.com/ftt/baa/hello.html
- location配置如下：
location /ftt{
root /home/abc/;
}则实际的http://example.com/替换为/home/abc访问路径：/home/abc/ftt//baa/hello.html
若请求的是：http://example.com/ftt/baa/hello.html
- location配置如下：
location /ftt{
alias /home/abc/;
}则实际的http://example.com/ftt替换为/home/abc访问路径：/home/abc/baa/hello.html
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在 Vue 项目中遇到页面滚动时数据栏位光标跳动的问题,通常是因为滚动事件触发了不必要的组件重绘,导致输入框或可聚焦元素被重新渲染,从而丢失焦点、光标重置,以下是几个常见原因及对应的解决方案,需要的朋友可以参考下2026-03-03
本文介绍了如何在Vue3项目中使用OpenLayers实现地图展示功能,包括安装OpenLayers、创建地图组件、添加图层、修改地图样式以及实现地图点击等功能,通过完整的代码示例,展示了如何在地图上添加标注和连线,OpenLayers提供了丰富的API和组件,可以满足各种地图展示需求2025-12-12
今天小编就为大家分享一篇Vue 数组和对象更新,但是页面没有刷新的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要为大家详细介绍了vue实现分页的三种效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
这篇文章主要介绍了vue 项目全屏插件screenfull使用案例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
SCSS是一种CSS预处理语言,定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,这篇文章主要给大家介绍了关于在vue项目中引入scss并使用scss样式的相关资料,需要的朋友可以参考下2022-07-07
Vue3使用echarts tree高度自适应支持滚动查看功能
这篇文章主要介绍了Vue3使用echarts tree高度自适应支持滚动查看功能,文章同通过代码示例介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了vite+vue3项目中svg图标组件封装的过程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
这篇文章主要为大家详细介绍了vue中SPA单页面应用程序的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
可以把数据变成响应式api的方法叫做响应式api,下面这篇文章主要给大家介绍了关于vue3响应式对象api的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
最新评论