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

Vue项目配置history模式及Apache服务器部署

最新推荐文章于 2024-10-08 19:18:34 发布

原创最新推荐文章于 2024-10-08 19:18:34 发布 · 2.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#apache #vue.js #javascript

js 专栏收录该内容

45 篇文章

订阅专栏

本文介绍了在Vue项目中如何将路由模式改为history，并详细阐述了打包后在Apache服务器上部署的步骤，包括修改router.js、vite.config.js配置，以及Apache的httpd.conf设置和.htaccess文件的创建。确保项目可以通过/m路径正常访问。

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