vue 打包后部署的路径问题？

Question

项目打包后不能部署到服务器的根目录，这一点好解决。但是访问该项目的网址并不是https://www.abc.com/，而是https://www.abc.com/dir/，也就是所有的路径前面都加了个/dir，请问这个需要怎么处理呢？

Answer 1

https://segmentfault.com/a/1190000012135787

以前写的，但是方法不变，只要是有几个参数有变化了，你可以参靠一下

如果你现在用的是vite+vue3.0只要是如下

在vite.config.ts里指定

base: '/dir/',

在router创建的时候

const router = createRouter({
    history: createWebHistory('/dir/'),
    routes
});

还有就是你的web服务器要针对所有对dir/目录下的访问如果不存在的URI都要定向到index.html
如apache下的设置如下，

<IfModule mod_rewrite.c>
  Options +FollowSymlinks
  RewriteEngine On
  
  RewriteCond %{REQUEST_URI} ^/(dir|dir/.*)$
  RewriteRule ^/hot/index\.html$ - [L,NC]
  
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule ^(dir|dir/.*)$ dir/index.html [L]
</IfModule>

Answer 2

老生常谈的问题了， VueCLI 在 vue.config.js 中调整你的 publicPath 为 /dir/ 或者 ./ 就好了。
如果是 Vite 也是同理的，在 vite.config.js 中配置设置 base 为 /dir/ 就行了。

文档地址
配置参考 | Vue CLI
共享配置 | Vite 官方中文文档