Vue CLI history模式部署到Tomcat，如何解决404长尾词问题？

本文共计688个文字，预计阅读时间需要3分钟。

在 Vue CLI 开发过程中，路由配置通常涉及以下几个步骤：

1. 安装 Vue Router：在项目根目录下运行 `npm install vue-router` 或 `yarn add vue-router` 安装 Vue Router。

2. 创建路由组件：根据应用需求创建对应的 Vue 组件。

3. 配置路由文件：在项目根目录下创建一个名为 `router.js`（或 `index.js`）的文件，用于定义路由。

4. 定义路由规则：在 `router.js` 文件中，使用 `VueRouter` 构造函数创建路由实例，并传入路由规则。

5. 注册路由：在 Vue 实例中注册路由实例。

6. 设置路由视图：在应用的模板中添加 `` 标签，用于显示当前路由对应的组件。

以下是一个简化的路由配置示例：

javascriptimport 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({ routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About } ]});

// 导出路由实例export default router;

在 `main.js` 文件中，你需要将创建的路由实例注入到 Vue 实例中：

javascriptimport Vue from 'vue';import App from './App.vue';import router from './router';

new Vue({ router, render: h=> h(App)}).$mount('#app');

在应用的模板中，使用 `` 标签：

Hello Vue CLI!

这样，你的 Vue CLI 项目就配置好了路由功能。

vue-cli开发过程中路由#不好看，去掉可使用history模式，开发模式路径访问都没问题，部署到服务器之后访问路径时报404，这种情况需要配置服务器默认访问路径index.html.官网只提供了apache、nginx的配置方式，没有tomcat的配置方式，下面以个例子来完成整个配置。

范例：vue-cli项目使用路由，tomcat作为服务器，项目文件夹名myvue

1.npm run build 打包生成的build文件夹中内容拷贝到myvue文件夹如下图：

2.myvue文件夹下新建WEB-INF/web.xml 其中添加404错误跳转路径如下图：

3.vue-cli项目config/index.js 配置assetsPublicPath:'/myvue/' 项目包名称

4.vue-cli项目src/router/index.js 配置mode:'history',base:'/myvue/'

以上vue-cli配置与tomcat部署都ok后，启动tomcat服务器，访问路径项目名myvue，ok可以正确访问了，

如果不设置服务器的index.html，也可以直接在vue-cli项目src/router/index.js 里 path:'/myvue/order-search' 直接配置上包名也可以解决问题

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。