IT博客汇 | vite 配置相关笔记

vite 配置相关笔记

子舒的博客发表于 2024-08-15 00:00:00

一、配置 route 路由

使用 vite + vue 构建项目默认是没有 route 的，所以需要手动引入。

1. 基础配置

# 建立一个 vite 项目
npm create vite@latest
yarn create vite

# 安装 route 依赖
npm install vue-router@4
yarn add vue-router@4

接下来，需要在项目中配置 Vue Router。首先在 src 目录下创建一个 router 目录，并在该目录下创建 index.js，并配置路由。

src/
  ├── router/
  │   └── index.js

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';

const routes = [{
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login.vue')
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

在 main.js 声明一下 route 文件。

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App)
app.use(router)
app.mount('#app')

并且在 App.vue 中要使用 router-view 来显示当前路由对应的组件，所以修改下文件。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

2. 添加多路由

要添加更多的页面或动态路由，可以继续在 routes 数组中添加配置。例如：

{
  path: '/user/:id',
  name: 'User',
  component: () => import('@/views/User.vue')
}

这样，访问 /user/1 就会加载 User.vue 组件并显示相应内容。

二、配置 @ 路径别名

注意，vite 默认是没有配置路径别名 @ 的，所以要手动添加，配置如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

配置完别名后，就可以在项目中使用 @ 来代替 src 目录的路径，从而简化模块引用。

三、dev 时自动访问本地服务

open: true 表示当你运行 vite 或 vite dev 时，开发服务器将自动在浏览器中打开本地服务器的 URL（例如 http://localhost:5173）。你也可以指定一个具体的 URL，例如：

// vite.config.js
export default defineConfig({
  server: {
    open: true, // 自动打开浏览器并访问本地服务器网址
    open: 'http://localhost:5173', // 在浏览器中打开指定的路径
  },
});

四、允许本地 ip 访问 local

// vite.config.js
export default {
  server: {
    host: true, // 允许使用本地 IP 访问
    port: 3000 // 可以根据需要修改端口
  }
}

vite.config.js 配置集合

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { fileURLToPath, URL } from 'node:url';

// https://vitejs.dev/config/
export default defineConfig({
  base: '/single-template/', // 设置打开目录
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)) // 允许使用 @ 别名
    }
  },
  server: {
    host: true, // 允许本地 ip 访问
    open: true, // 自动打开浏览器并访问本地服务器网址
    // open: 'http://localhost:5173', // 在浏览器中打开指定的路径
  },
})