vue3+vite+router4项目打包后在apache环境下运行更改默认/地址

路由模式为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功能:

  1. LoadModule rewrite_module libexec/apache2/mod_rewrite.so,去掉前面的#,打开注释。

  2. 找到 AllowOverride None 的那行,把它改成 AllowOverride All,来使 .htaccess 文件生效。

  3. 在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>

  1. 将vite项目npm run build打包好的文件放入www/m目录中,使用localhost/m 就可以访问了
    在这里插入图片描述
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值