feat: 新增路径别名、多环境配置、生产环境打包配置

.env.development

@@ -0,0 +1,5 @@
+# 开发环境变量
+ENV = 'development'
+
+# base api
+VUE_APP_BASE_API = '/dev-api'

.env.production

@@ -0,0 +1,6 @@
+# 生产环境变量
+ENV = 'production'
+
+# base api
+VUE_APP_BASE_API = '/prod-api'
+

.env.staging

@@ -0,0 +1,6 @@
+# 模拟环境变量
+ENV = 'staging'
+
+# base api
+VUE_APP_BASE_API = '/stage-api'
+

package.json

@@ -2,8 +2,8 @@
   "name": "vue3-element-admin",
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
+    "dev": "vite serve --mode development",
+    "build:prod": "vue-tsc --noEmit && vite build --mode production",
     "serve": "vite preview"
   },
   "dependencies": {
@@ -13,6 +13,7 @@
     "vuex": "^4.0.2"
   },
   "devDependencies": {
+    "@types/node": "^16.11.7",
     "@vitejs/plugin-vue": "^1.9.3",
     "typescript": "^4.4.3",
     "vite": "^2.6.4",

src/App.vue

@@ -1,8 +1,3 @@
-<script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
-import HelloWorld from './components/HelloWorld.vue'
-</script>
 
 <template>
   <img alt="Vue logo" src="./assets/logo.png" />

src/components/HelloWorld.vue

@@ -1,42 +1,27 @@
 <template>
-  <el-input v-model="input" placeholder="Please input" />
-  <el-input-number v-model="num" :min="1" :max="10" @change="handleChange"/>
+  <el-input v-model="num"/>
+  <el-button @click="handleClick">点击+1</el-button>
 </template>
 
-<script lang="ts">
-import {defineComponent, ref} from 'vue'
-
+<script  lang="ts">
+import {defineComponent, computed} from 'vue'
+import {userStore} from '@/store';
 
 export default defineComponent({
   setup() {
-    const num = ref(1)
-    const handleChange = (value: string) => {
-      console.log(value)
+    const store = userStore()
+    const num = computed(()=>{
+      return store.state.count
+    })
+    const handleClick = () => {
+      store.commit('increment')
     }
     return {
-      input:ref(''),
       num,
-      handleChange,
+      handleClick
     }
   },
 })
 </script>
 
 
-<style scoped>
-a {
-  color: #42b983;
-}
-
-label {
-  margin: 0 0.5em;
-  font-weight: bold;
-}
-
-code {
-  background-color: #eee;
-  padding: 2px 4px;
-  border-radius: 4px;
-  color: #304455;
-}
-</style>

src/store/index.ts

@@ -1,5 +1,5 @@
 import {InjectionKey} from 'vue'
-import {createStore, Store} from 'vuex'
+import {createStore,useStore as baseUseStore ,Store} from 'vuex'
 
 export interface State {
     count: number
@@ -20,6 +20,7 @@ export const store = createStore<State>({
     }
 })
 
-
-
+export function userStore(){
+    return baseUseStore(key)
+}
 

tsconfig.json

@@ -9,8 +9,16 @@
     "sourceMap": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
-    "lib": ["esnext", "dom"]
-  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+    "lib": ["esnext", "dom"],
 
+    /* Vite 路径别名报错 */
+    "baseUrl": "./",
+    "paths": {
+      "@": ["src"],
+      "@/*": ["src/*"]
+    },
+
+    "skipLibCheck": true  // element-plus 生产打包报错，通过此配置修改 TS 不对第三方依赖类型检查
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }

vite.config.ts

@@ -1,7 +1,43 @@
-import { defineConfig } from 'vite'
+import {defineConfig} from 'vite'
 import vue from '@vitejs/plugin-vue'
 
+// 在 ts 模块中加载 node 核心模块需要安装 node 的类型补充模块: npm i -D @types/node
+import path from 'path'
+
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()]
+    plugins: [vue()],
+    resolve: {
+        // Vite2设置别名路径方式一
+        /**
+         alias:{
+
+           "/@":path.resolve("./src"),
+         },
+         **/
+
+        // Vite2设置别名路径方式二
+        alias: [
+            {
+                find: "@",
+                replacement: path.resolve("./src")
+            },
+            {
+                find: "@image",
+                replacement: path.resolve("./src/assets/images")
+            },
+            {
+                find: "@router",
+                replacement: path.resolve("./src/router")
+            },
+            {
+                find: "@store",
+                replacement: path.resolve("./src/store")
+            },
+            {
+                find: "@api",
+                replacement: path.resolve("./src/api")
+            }
+        ]
+    }
 })