解决 vue 打包后,刷新时的路径错误问题
vue-cli 搭建的工程,打包后的文件在 dist 目录,
把打包好的文件,上传到服务器,刷新页面出现 Cannot GET /article 或者 Not Found,
开始以为是写的 js 代码有问题,
实际是路由配置的路径 /article 出现的问题,
因为静态资源服务器上没有对应的 /article 目录,该路径是 histroy api 生成的,刷新后找不到真实的路径,百度后解决如下
1、百度 ai 给出的解决方法
报错问题:
"vue打包后,刷新页面,路径错误"
通常指的是单页应用(SPA)使用了 Vue Router,并且使用了 HTML5 的 history 模式,
当用户直接访问非首页链接或者刷新页面时,可能会遇到404错误,因为服务器没有配置相应的后备路由来返回入口的HTML文件。
解决方法:
1、使用 Vue CLI 创建的项目,可以在 vue.config.js 文件中配置 publicPath 和 outputDir。
// vue.config.js module.exports = { publicPath: '/your-app-path/', // 设置为你的应用部署的路径 outputDir: 'dist', // 构建时输出目录 };
2、对于后端服务器,需要配置一个后备路由,使得对所有页面资源的请求都返回index.html文件。以下是一些常见服务器的配置示例:
Apache 在 .htaccess 文件中添加如下配置
<IfModule mod_rewrite.c> RewriteEngine On RewriteBase /your-app-path/ RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /your-app-path/index.html [L] </IfModule>
Nginx 在 Nginx 配置文件中添加如下配置
location /your-app-path/ { try_files $uri $uri/ /your-app-path/index.html; }
Node.js (如Express)
// server.js 或 app.js app.use('/your-app-path', express.static(path.join(__dirname, 'dist'))); app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'dist/index.html')); });
确保替换 /your-app-path/ 为你的应用实际部署的路径,
以上配置能确保所有的路由请求都回退到 index.html,从而允许 Vue Router 在前端处理路由。
百度ai的回答
2、具体的配置方法
有三个地方需要配合
比如打包后的文件上传到服务器的 /my-code/blog 目录上
服务器目录的 .htaccess 文件
/my-code/blog/.htaccess
<IfModule mod_rewrite.c> RewriteEngine On RewriteBase /my-code/blog/ RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /my-code/blog/index.html [L] </IfModule>
vue-cli 工程目录下面的 vue.config.js 文件,设置应用的部署路径
module.exports = { publicPath: '/my-code/blog', // 设置为你的应用部署的路径 devServer: { proxy: { "/api": { target: 'http://test.my-site.com', }, "/commercial_api": { target: 'http://ruyic.com', }, } } }
最后是 vue 路由相应的配置,修改 path 属性的值,以 my-code/blog/ 开头
import Home from "@/views/Home"; import About from "@/views/About"; import Blog from "@/views/Blog"; import Project from "@/views/Project"; import BlogDetail from "@/views/Blog/Detail"; import Message from "@/views/Message"; export default [ {name:"Home", path:"/my-code/blog/", component:Home}, {name:"Blog", path:"/my-code/blog/article", component:Blog}, {name:"CategoryBlog", path:"/my-code/blog/article/cate/:categoryId", component:Blog}, { name: "BlogDetail", path: "/my-code/blog/article/defail/:id", component: BlogDetail }, {name:"About", path:"/my-code/blog/about", component:About}, {name:"Project", path:"/my-code/blog/project", component:Project}, {name:"Message", path:"/my-code/blog/message", component:Message} ];
Apache 服务器亲测可用,配置完 .htaccess 文件后,可能需要重新启动一下 Apache 服务,也可能不需要重新启动,这个要多尝试