vue打包项目部署设置子路径访问nginx部署多个子项目一个ip/域名

注本文需要nginx配置基础。

基础不牢的可见文章Nginx配置大全【六大使用场景、七大负载均衡策略、四大负载健康检查】

vue.config.js

https://cli.vuejs.org/zh/config/#css-loaderoptions

module.exports

如果应用被部署在一个子路径上你就需要用这个选项指定这个子路径。

例如如果你的应用被部署

publicPath

检测当前的运行环境开发production或生产development

如果开发和生产环境路径都一样则直接

publicPath:production二、在路由文件下配置位置和文件名不固定可以是src/router.js也可以是src/router/index.js

//路由与组件引入

不会nginx基础配置的请移步文章《Nginx配置大全【六大使用场景、七大负载均衡策略、四大负载健康检查】》

配置访问子路径避免和文件路径定义冲突下面采用子路由的说法location

/admin/

指定前端应用的根目录子路由访问不能再使用root需要使用aliasalias

尝试匹配文件如果找不到则重定向到

如果不加前面的路径则会出现页面能访问但是不能刷新一刷新就没的情况。

try_files

$uri

index.htm;}注意点上面配置代码每个注释都看一下避免一些bug

常见问题bug

它会将请求URI中的斜杠后面的路径添加到指定的根目录后面。

location

/static/

那么Nginx会在/var/www/static/css/style.css路径下查找相应的文件。

2、alias指令

alias指令用于将请求URI的一部分映射到文件系统中的另一个路径。

它会将请求URI中匹配location的部分替换为指定的路径。

location

/static/

那么Nginx会在/var/www/css/style.css路径下查找相应的文件。

主要区别在于

路径处理方式root指令将请求URI直接附加到根目录而alias指令会替换location匹配的部分。

路径结尾斜杠处理root指令会自动添加斜杠而alias指令需要在路径末尾手动添加斜杠以确保正确的路径映射。