以下是一个简化的Vue 3 + TypeScript项目的配置示例，包括router、pinia、SCSS和跨域配置：
vite.config.ts 配置示例：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/styles/variables.scss";`,
},
},
},
server: {
proxy: {
'/api': {
target: 'http://backend.server.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},
})
router/index.ts 配置示例：
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: () => import('@/views/Home.vue'),
},
// 更多路由配置...
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
})
export default router
store.ts 配置示例：
import { defineStore } from 'pinia'
export const useMainStore = defineStore({
id: 'main',
state: () => ({
counter: 0,
}),
actions: {
increment() {
this.counter++
},
},
})
variables.scss 文件示例：
$primary-color: #3498db;
$secondary-color: #e74c3c;
// 更多变量定义...
main.ts 文件示例：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { store } from './store'
const app = createApp(App)
app.use(store)
app.use(router)
app.mount('#app')
以上代码提供了Vue 3 + TypeScript项目中的基本配置，包括使用Vite作为构建工具，集成Vue Router、Pinia状态管理库，并支持SCSS预处理器。同时，它展示了如何配置Vite代理以处理跨域请求。这些配置和示例代码为开发者提供了一个清晰的起点，以便他们可以快速开始自己的Vue 3 + TypeScript项目。