feat: add alias in the vite.config.js

kevin · kevin · commit 158b81782a0f · 2022-04-19T10:59:16.000+08:00
diff --git a/README.md b/README.md
@@ -1,5 +1,13 @@
+配置 `vue3`的基础的工程模板
+
 ### 创建工程
 
+执行下面的命令创建工程，根据提示选择 `vue`
+
+```
+npm init vite vue3-vite-js-template
+```
+
 ```
 npm install eslint eslint-plugin-vue @babel/core @babel/eslint-parser -D
 ```
@@ -155,6 +163,8 @@ npx --no-install lint-staged
 
 ```
 
+### 创建别名
+
 ### router
 
 安装 `vue-router`
diff --git a/src/router/index.js b/src/router/index.js
@@ -1,5 +1,5 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
-import Layout from '../layouts/Layout.vue'
+import Layout from '@layout/Layout.vue'
 const routes = [
   {
     path: '/',
@@ -10,7 +10,7 @@ const routes = [
       {
         path: 'home',
         name: 'Home',
-        component: () => import('../pages/Home.vue')
+        component: () => import('@page/Home.vue')
       }
     ]
   }
diff --git a/vite.config.js b/vite.config.js
@@ -1,7 +1,16 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import path from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()]
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+      '@component': path.resolve(__dirname, 'src/components'),
+      '@layout': path.resolve(__dirname, 'src/layouts'),
+      '@page': path.resolve(__dirname, 'src/pages')
+    }
+  }
 })

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`import { createRouter, createWebHashHistory } from 'vue-router'`
`2`		`-import Layout from '../layouts/Layout.vue'`
	`2`	`+import Layout from '@layout/Layout.vue'`
`3`	`3`	`const routes = [`
`4`	`4`	`{`
`5`	`5`	`path: '/',`
`@@ -10,7 +10,7 @@ const routes = [`
`10`	`10`	`{`
`11`	`11`	`path: 'home',`
`12`	`12`	`name: 'Home',`
`13`		`- component: () => import('../pages/Home.vue')`
	`13`	`+ component: () => import('@page/Home.vue')`
`14`	`14`	`}`
`15`	`15`	`]`
`16`	`16`	`}`