解决宝塔部署vue项目后只能访问index.html页面的问题

最新推荐文章于 2025-06-29 19:58:32 发布

原创最新推荐文章于 2025-06-29 19:58:32 发布 · 2.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #vue.js #javascript

网站部署专栏收录该内容

2 篇文章

订阅专栏

本文指导您如何在宝塔面板中为网站配置伪静态规则，通过`location/`块实现页面请求到`index.html`的自动重定向，提升URL友好性和SEO效果。

打开宝塔面板，选择网站->设置->伪静态

location / {
  if (!-e $request_filename) {
    rewrite  ^(.*)$ /index.html?s=/$1  last;
    break;
  }
}

保存就可以了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

YiAn~

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue打包后直接本地访问index.html

小白白的博客

12-20

1532

在vue.config.js 文件，没有的话就新建一个，并添加publicPath: './ ’router.js 把mode改成。

解决宝塔面板部署Vue项目出现404错误的完整指南

Java程序员_编程开发学习笔记_网站安全运维教程_渗透技术教程

06-29

1655

《宝塔面板部署Vue项目404错误解决方案》摘要：本文针对在宝塔面板部署Vue项目时常见的404错误问题，特别是使用VueRouter history模式的情况，提供完整解决方案。主要问题源于服务器配置不当、静态文件路径错误或项目根目录设置不正确。解决方案包括：1）Nginx配置添加try_files规则；2）Apache配置重写规则；3）改用VueRouter hash模式。详细步骤涵盖项目打包、文件上传、权限设置和路径配置，并给出常见问题排查方法和最佳实践建议，如使用Docker部署和启用Gzip压缩

1 条评论您还未登录，请先登录后发表或查看评论

1 条评论

wute 2021.12.08
保存不了

nginx部署vue只能访问默认页面的问题

安余生的博客

03-31

6867

在通过nginx启动vue以后我们在访问页面的时候只能访问默认页面和通过项目内跳转其他页面，如果刷新就会404 通过默认页面内部访问：直接刷新：可以看到nginx并不识别vue的其他页面，这跟conf文件的配置有关 location / { root /home/nx/dist; index index.html index....

vue3 路由切换后，页面不显示内容，刷新后正常显示

qq_45469341的博客

05-27

5115

这个白屏问题我是第一次遇到，所以想完整记录一下，本文也借鉴了一下别人的。

vue build打包后只能访问index其他路径无法访问问题

qq_39710367的博客

07-02

1412

1、router下index.js 文件中requireAuth是否是false, meta: { requireAuth:false, }, 2、去掉 mode: "history" 采用#间隔访问

Vue fetch 方法，vue 配置接口，只拿到index.html 页面

qq_38192709的博客

11-22

938

问题描述：fetch() 方法，并配置了接口，只拿到 index.html 页面代码，如图：我自己实践过的解决方法：ctrl + c 关闭vue 项目，我用的是 stormWeb, 先退出 stormWeb，再进入 stormWeb ，npm run dev 重启项目即可。 postscript: 如果再写方法，并在 Server.js 里面配置接口，也一样会出现上面只拿到 index.html 页面的情况。 ...

宝塔面板网站的主域名访问【502 Bad Gateway】而访问index.html却正常的原因？

weixin_43343144的博客

07-06

1533

这里默认文档的【第一个位置】为主域名首选默认访问,比如你的第一个为【index.php】如果访问不存在的话，则会导致【主域名访问提示错误502 Bad Gateway】为此请把【index.html】放在第一个位置即可【因为某些网站可能已做了静态解析,无法访问index.php】 ...

Linux系统下的宝塔面板，配置默认文档index.html的方法

最新发布

08-15

在宝塔面板中部署Vue项目时，如果仅`index.html`能够加载，而访问其他页面时返回404错误，这通常与服务器的静态资源路由配置有关。Vue项目使用了前端路由（如`vue-router`），默认情况下，服务器仅能正确识别`index....

解决宝塔面板部署Vue项目出现404页面错误的完整指南

Java程序员_编程开发学习笔记_网站安全运维教程_渗透技术教程

06-29

882

Vue项目部署404错误解决方案：1.路由问题：使用history模式需配置服务器重定向（Nginx/Apache伪静态规则）或改用hash模式；2.静态资源路径：在vue.config.js中正确设置publicPath；3.服务器配置：确保Nginx指向dist目录并配置API代理。宝塔面板用户可在站点设置中修改伪静态规则，建议部署后检查日志验证路径匹配。

vue项目 npm run build后在浏览器上打开index.html常见问题

H的博客

12-11

3284

1.打开报错解决方法 config文件里的index.js里, assetsPublicPath:'/',改成 ./ 重新build即可 2.打开后使用的icon字体图标不显示解决方法 build文件里的utils.js里添加publicPath:'../../' ，重新build即可 ...

index.html和app.vue之间的关系

Akatsuki233的博客

04-08

1729

// main.js中： new Vue({ el: '#app', // index.html中的 <div id="app"></div> components:{App}, // ES6语法，在对象中，如果键值对一样的话，只写一个就可以（声明有哪些组件） template: '<App/>' // <App/> 等于 <App&gt...

三种方案解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题

m0_66051368的博客

07-06

8369

Vue打包后生成的dist文件中的index.html，双击在浏览器中打开后发现一片空白，打开控制台有很多报错：“Failed to load resource: net::ERR_FILE_NOT_FOUND”。2. 将index.html中资源引用的绝对路径改为相对路径；这是因为dist文件是需要放在服务器上运行的，资源默认放在根目录下。可以打开浏览器在localhost:8080中查看了。，此时可以双击index.html在浏览器中正常访问了！指向磁盘根目录，所以找不到引用的文件。

全网最通透，已解决！！！宝塔部署网页后只能进主页、欢迎页的解决方法，nginx安装后只能进欢迎页的方法

qq_42971491的博客

08-01

3033

宝塔部署只能访问欢迎页，主页，Nginx安装后只能访问到主页，Welcome to HTTP Server Test Page!问题

新建的web项目为什么默认访问index.jsp

学习笔记。

03-02

1212

tomcat自带的web.xml配置了welcome-file-list节点，该节点的子节点即为默认访问页面（welcome-file），welcome-file配置的顺序会影响到实际的默认访问，我们可以在自己的web.xml文件中配置welcome-file-list节点以覆盖tomcat自带的，tomcat自带的web.xml中配置的welcome-file-list节点如下 <welcome-file-list> <welcome-file>index.html<

解决VUE项目上线后，打开index.html一片空白

weixin_42967392的博客

05-28

1061

在Vue.config.js文件里，增加publicPath: ‘./’,如果已经有该属性则把’/’,替换为’./’，这样路径就正确了。