vue-router history 模式部署

最新推荐文章于 2025-06-25 14:56:05 发布

原创最新推荐文章于 2025-06-25 14:56:05 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue-router #nginx #tomcat

部署专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍如何将使用Vue.js的单页应用通过history模式部署到Nginx和Tomcat服务器上，包括Vue项目的打包、Nginx配置、Tomcat项目配置及错误页面设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-router history 模式部署

打包vue
nginx
tomcat

打包vue

在vue项目目录下
 1. npm run build
在目录下会生成
-dist
    /index.html
    /static

nginx

添加nginx代理配置
nginx.conf修改

server{
      listen                   80;
      server_name              www.xxx.com;
      access_log               /alidata/server/nginx/logs/xxx/www.xxx.com_access.log;
      error_log                /alidata/server/nginx/logs/xxx/www.xxx.com_error.log;
      error_page 411 = @my_error;
	location / {
	   root /alidata/h5/dist;
	   try_files $uri $uri/ /index.html last;
	   index  index.html;
	   expires 1d;
	   add_header Access-Control-Allow-Origin *;
	}
}

注意必须添加这2行

root /alidata/h5/dist;
try_files $uri $uri/ /index.html last;

重启nginx

nginx -s reload

根据vue的路由配置访问

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/birthday',
      name: 'birthday',
      component: birthday1
    }
  ],
  scrollBehavior (to, from, savedPosition) {
    console.log(to,from,savedPosition)
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

直接访问看看
www.xxx.com 访问的是 ‘/’
www.xxx.com/birthday 访问的是 /birthday

tomcat

假如javaee的项目名叫vueweb

将生成的
-dist
    /index.html
    /static
拷贝到vueweb的下，不需要dist
webapp
  /vueweb
    /index.html
    /static
    /WEB-INF
       web.xml

在web.xml中添加

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
         <error-page>
            <error-code>404</error-code>
            <location>/index.html</location>
        </error-page>
</web-app>