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

  • Z时代
  • 2024-02-13
  • 分类：IT

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

回答：

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>

回答：

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

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

以上是 vue 打包后部署的路径问题？ 的全部内容， 来源链接： utcz.com/p/934043.html

回到顶部