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

总结

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