vue项目打包部署后默认路由不正确的解决方案

首先，我们需要理解打包过程中的路由问题。在vue项目中，路由由路由表文件（router/index.js）控制，如果不指定默认路由，就会采用默认的路由配置方式，即会访问localhost:8080/#/，但是在部署后，如果直接访问网站地址，就无法正确渲染网页，因为在服务器中，项目的router.base需要指定为网站地址，而不是默认的localhost:8080地址。

接下来，我们来详细讲解解决方案：

步骤一：配置router/index.js

打开router/index.js文件，在顶部添加以下代码：

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

这个mode和base配置表示使用 HTML5 history 模式（即去掉 URL 中的 #）和基路径，将base设置为process.env.BASE_URL变量，表示是从环境变量中获取网址。

步骤二：在package.json中添加homepage

打开package.json文件，在"scripts"下添加以下代码：

"homepage": "https://example.com"

这个homepage配置表示应用在生产环境中的根地址，如果没有指定router.base时，默认使用这个地址。

步骤三：重新打包

重新运行打包命令，如：npm run build 或者 yarn build。

打包完成后，你会发现在dist目录中，会生成一个名为index.html的文件。

步骤四：手动修改index.html

打开index.html文件，找到以下代码：

<head>
    <!-- ... -->
    <base href="/" />
    <!-- ... -->
</head>

将base href修改为你的网站网址：

<head>
    <!-- ... -->
    <base href="https://example.com/" />
    <!-- ... -->
</head>

这个base href配置表示路由表中的根地址。这样，你的路由就可以正确找到文件了。

示例一：根据实际情况修改baseUrl

假设我的网站地址为https://www.example.com/my-app，那么打开router/index.js文件，可以将base设为process.env.BASE_URL的值：

const router = new Router({
  mode: 'history',
  base: '/my-app/',
  routes: [...]
})

改完后，再重新打包，这样就能部署在正确的目录下。

示例二：使用nginx配置实现路由匹配

在nginx的配置文件中添加以下代码：

location /my-app/ {
    alias /usr/share/nginx/html/;
    try_files $uri $uri/ /my-app/index.html;
}

这个配置表示如果访问/my-app/路径下的文件，则会去nginx配置的文件目录下匹配，如果没有匹配到，就直接重定向到/my-app/index.html，这样就实现了正确的路由匹配。

以上就是“vue项目打包部署后默认路由不正确的解决方案”的完整攻略，希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue项目打包部署后默认路由不正确的解决方案 - Python技术站

vue项目打包部署后默认路由不正确的解决方案

相关文章