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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

VSCode搭建Vue项目的方法
这篇文章主要介绍了VSCode搭建Vue项目的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
Vue3菜单展开和收起实现
在Vue项目中实现首页布局,包括可收放的左侧菜单和主体内容区,在store中管理菜单状态,通过修改isCollapse状态控制菜单的展开与收起,在home.vue中编写左侧菜单栏的代码和样式,实现一个响应式的用户界面
2024-09-09
Vue3中进行页面局部刷新组件刷新的操作方法
这篇文章主要介绍了Vue3中进行页面局部刷新组件刷新的操作方法,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-12-12
vue3+vite+移动端webview打包后页面加载空白问题解决办法
这篇文章主要给大家介绍了关于vue3+vite+移动端webview打包后页面加载空白问题的解决办法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
2024-06-06
vue3.x中apollo的使用案例代码
这篇文章主要介绍了vue3.x中apollo的使用,通过前端自身直接获取到apollo的配置目前看到官方支持的客户端是没有vue的，本文给大家介绍了前端获取到apollo数据的过程，需要的朋友可以参考下
2023-02-02
vue下canvas裁剪图片实例讲解
在本篇文章里小编给大家整理了关于vue下canvas裁剪图片实例讲解内容，需要的朋友们可以参考下。
2020-04-04
在vue中nextTick用法及nextTick 的原理是什么
这篇文章主要介绍了在vue中nextTick用法及nextTick 的原理是什么,Vue.js 是一个流行的前端框架，它提供了一种响应式的数据绑定机制，使得页面的数据与页面的 UI 组件之间能够自动同步，需要的朋友可以参考下
2023-04-04
Vue之data定义的三种方式及区别说明
这篇文章主要介绍了Vue之data定义的三种方式及区别说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
一文学会什么是vue.nextTick()
这篇文章主要介绍了一文学会什么是vue.nextTick()，下面文章围绕主题的相关资料展开详细内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-04-04
vue一步到位的实现动态路由
这篇文章主要介绍了vue一步到位的实现动态路由，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06