路由模式为history时,打包完成后的项目,路由跳转默认是/,也就是服务器的根路径地址,更改步骤如下:
1. src/router/router.js 路由配置文件
import { createRouter, createWebHistory } from "vue-router"
// createWebHashHistory createWebHistory
//组件vue导入
const app_title = "页面标题";
//定义路由常量
const routes = [
//初始路由
// {
// name: '/',
// path: "/",
// redirect: {
// name: 'register',
// }
// },
{
path: '/',
name: 'index',
component: () => import('@/admin/index.vue'),
children: [{
path: '/',
name: 'adminHome',
component: () => import('@/admin/home.vue'),
},{
path: 'center',
name: 'center',
component: () => import('@/admin/Center.vue'),
},{
path: 'order',
name: 'order',
component: () => import('@/admin/order.vue'),
}]
},
{
name: 'login',
path: '/login',
component: () => import('@/admin/Login.vue'),
meta: {
title: app_title,
},
},
{
name: 'register',
path: '/register',
component: () => import('@/admin/Register.vue'),
meta: {
title: app_title,
},
},
];
const router = createRouter({
history: createWebHistory('/m/'),
routes, // `routes: routes` 的缩写
})
//导入配置好的路由对象
export default router;
2. vite.config.js (配置base为目录地址’/m/’)
//import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const { resolve } = require('path')
// https://vitejs.dev/config/
export default({
// 起个别名,在引用资源时,可以用‘@/资源路径’直接访问
resolve: {
alias: {
"@": resolve(__dirname, "src"),
},
},
plugins: [
vue(),
],
base: '/m/',
// 配置前端服务地址和端口
server: {
host: '127.0.0.1',
port: 3000,
// 是否开启 https
https: false,
},
})
3. 修改Apache中httpd.conf文件,开启rewrite_module功能:
-
LoadModule rewrite_module libexec/apache2/mod_rewrite.so,去掉前面的#,打开注释。
-
找到 AllowOverride None 的那行,把它改成 AllowOverride All,来使 .htaccess 文件生效。
-
在apache的www/m目录下创建.htaccess文件
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /m/index.html [L]
</IfModule>
- 将vite项目npm run build打包好的文件放入www/m目录中,使用localhost/m 就可以访问了