Vue项目使用history模式，打包部署到二级目录_vue打包为二级目录

作者：Gausst松鼠会 | 2024-03-17 04:49:20

踩

vue打包为二级目录

需求：Vue项目使用history模式，打包部署到服务器上的二级目录。
示例：your host name/h5/index.html

原理：把页面地址所有含有/h5/的url重定向到：根目录 -> h5/ -> /h5/index.html

1、打包注意：找到vue.config.js文件，修改publicPath，对应服务器上的二级目录名

2、路由配置：找到router.js文件，设置 mode: 'history', 基础url配置 base：'/h5/'


location /h5/ {
   try_files $uri $uri/ /h5/index.html;
}

这样配置之后，所有打包之后的js,css,等文件url请求上面都会携带h5。

注意：此处二级目录是h5，所以publicPath,history模式以及nginx中都设置为h5。根据需要改成你自己的二级目录名。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/254125