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的回答

https://www.baidu.com/s?ie=UTF-8&wd=vue%E6%89%93%E5%8C%85%E5%90%8E+%E5%88%B7%E6%96%B0%E5%90%8E+%E8%B7%AF%E5%BE%84%E9%94%99%E8%AF%AF&tn=68018901_3_dg

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}
];

正确的做法是，设置全局基路径

某度搜索关键词“vue 路由里 配置统一的路径

import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
 
Vue.use(Router);
 
const router = new Router({
  mode: 'history', // 使用HTML5 History模式
  base: '/myapp', // 设置全局基路径
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
});
 
export default router;

Apache 服务器亲测可用，配置完 .htaccess 文件后，可能需要重新启动一下 Apache 服务，也可能不需要重新启动，这个要多尝试