搭建H5+Vue3+Vite+Ts

1. 到目标目录，打开操作台执行npm init vite@latest初始化vite工程；

2. 使用webStorm打开工程，npm i，dev启动

3. 添加路由-npm install vue-router@4

4. Typescript无法识别vue文件，需要在env.d.ts文件通过声明模块的方式使Typescript能为vue文件提供语法检查

   /// <reference types="vite/client" />
   declare module "*.vue" {
       import type { DefineComponent } from "vue";
       const vueComponent: DefineComponent<{}, {}, any>;
       export default vueComponent;
   }
   

5. 相对路径取别名：用@代替src

   • npm install path -D
   • npm install --save-dev @types/node
   • 修改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('./src') //相对路径配置，使用 @ 代替 src
         	}
      	}
     })
     

6. 添加路由文件：/router/index.ts

   import {createRouter, createWebHashHistory} from 'vue-router'
   
   const routes = [{
       path: '/', component: () => import('../views/modules/demo1.vue')
   }]
   const router = createRouter({
       history: createWebHistory(),
       routes
   })
   export default router
   

7. 修改main.ts文件，使用router

   • 注意：app是指createApp(App)；先有app才有use和mount；注意书写顺序

     import { createApp } from 'vue'
     import App from './App.vue'
     import router from "./router";
     const app = createApp(App);
     app.use(router)
     app.mount('#app')
     

   • 解决问题
     

8. 修改App.vue，添加路由视图

   <script  lang="ts">
   export default {
     name: 'App',
     components:{}  //注册组件
   }
   </script>
   
   <template>
     <div >
       <RouterView/>
     </div>
   </template>
   

9. 应用增加页面keepAlive支持

   • App.vue代码修改：

      <div>
     	<router-view v-slot="{ Component }">
       		<keep-alive>
        			 <component :is="Component" v-if="$route.meta.keepAlive"></component>
       		</keep-alive>
       		<component :is="Component" v-if="!$route.meta.keepAlive"></component>
     	</router-view>
     </div>
     

   • /router/index.ts文件修改——需要keepAlive时添加meta: {keepAlive: true }

     const routes = [
     {
         path: '/',
         component: () => import('../views/modules/home.vue'),
         meta: {
             keepAlive: true
         }
     },
     {
         path: '/demo1',
         component: () => import('../views/modules/demo1.vue'),
     },
     ]
     

10. 添加postcss作为辅助工具，自动把px单位换算为rem，实现自适应

    • 添加依赖
      • npm i postcss-pxtorem -D
      • npm i -s amfe-flexible
    • 添加postcss.config.js文件

      export const defaultHtmlFontSize = 37.5
      export default {
          plugins: {
              'postcss-pxtorem': {
                  rootValue: defaultHtmlFontSize,
                  propList: ['*'],
                  selectorBlackList: [':root'],
              }
          }
      }
      

    • 在main中引入插件import 'amfe-flexible'

11. 添加vuex作为项目全局状态管理工具

    • npm i vuex@next --save
    • 创建/store/index.ts文件

      import { createStore } from 'vuex'
      const store = createStore({
      	state() {
      		return {
      			count: 0
      		}
      	},
      	mutations: {
      		increment(state: { count: number }) {
      			state.count++
      		}
      	}
      })
      export default store
      

    • 在src目录下新建vuex.d.ts文件，添加以下代码生命vuex中的变量类型

      declare module 'vuex' {
      	export * from 'vuex/types/index.d.ts'
      	export * from 'vuex/types/helpers.d.ts'
      	export * from 'vuex/types/logger.d.ts'
      	export * from 'vuex/types/vue.d.ts'
      }
      

    • 在main.ts中使用store

      import store from './store'
      app.use(store)
      

    • 在hone.vue文件中尝试使用

      <script setup lang="ts">
      import {useRouter} from 'vue-router';
      import {useStore} from 'vuex'
      import {onMounted} from "vue";
      const router = useRouter()
      let store=useStore()
      
      function nextHandle() {
        router.push({path: '/demo1'})
      }
      onMounted(()=>{
        store.commit('increment')
        console.log(store.state.count)
      })
      </script>
      

12. 增加vuex-persistedstate作为持久化存储工具

    • npm i vuex-persistedstate
    • 修改/store/index.ts文件

      import { createStore } from 'vuex'
      import createPersistedState from 'vuex-persistedstate'
      
      const store = createStore({
          modules:{
          },
          plugins:[createPersistedState({
              storage:window.sessionStorage
          })],
          state() {
              return {
                  count: 0
              }
          },
          mutations: {
              increment(state: { count: number }) {
                  state.count++
              }
          }
      })
      
      export default store
      

13. 添加sass作为项目样式预处理语言，需要安装sass工具和sass-loader工具

    • npm i sass -D
    • npm i sass-loader -D

14. 配置Vite环境变量

    • 参考官网 Vite环境变量
    • 注意：
      • 为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。
      • 加载的环境变量也会通过 import.meta.env 以字符串形式暴露给客户端源码。(所有类型转为字符串)
    • 创建.env.development——开发环境请求后台地址

      ENV = 'dev'
      
      VITE_APP_ENV = 'dev'
      
      VITE_APP_BASE_API = 'https://xxx-test.xxxx.com'
      
      VITE_APP_REQUEST_URL = '/api/xxx'
      

    • 创建.env.production——生产环境请求后台地址

      ENV = 'production'
      
      VITE_APP_ENV = 'prod'
      
      VITE_APP_BASE_API = 'https://xxx.xxxxxx.com'
      
      VITE_APP_REQUEST_URL = '/api/xxx'
      

    • 修改package.json——启动&打包

      "scripts": {
      "dev": "vite --mode development",
      "build": "vue-tsc -b && vite build --mode production",
      "start": "vite --mode production",
      "build:env": "vite build --mode development",
      },
      

    • 使用——(import.meta.env.xxxx)
      • console.log(import.meta.env.VITE_APP_BASE_API )
        • 测试环境—— ‘https://xxx-test.xxxx.com’
        • 生产环境—— ‘https://xxx.xxxxxx.com’

15. 打包

    • 添加压缩组件npm i vite-plugin-compression -d
    • 完善vite.config.ts

      import {defineConfig} from 'vite'
      import vue from '@vitejs/plugin-vue'
      import path from 'path'
      import viteCompression from 'vite-plugin-compression'
      
      // https://vitejs.dev/config/
      export default defineConfig({
          plugins: [
              vue(),
              viteCompression({
                  algorithm: 'gzip', // 压缩算法，可选[‘gzip’，‘brotliCompress’，‘deflate’，‘deflateRaw’]
                  threshold: 10240, // 如果体积大于阈值，则进行压缩，单位为b
                  deleteOriginFile: false // 压缩后是否删除源文件
              }),
      
          ],
          resolve: {
              alias: {
                  '@': path.resolve('./src') //相对路径配置，使用 @ 代替 src
              }
          },
          // scss 全局变量的一个配置
          css: {
              preprocessorOptions: {
                  scss: {
                      javascriptEnabled: true,
                      additionalData: '@import "./src/assets/scss/global.scss";'
                  }
              }
          },
          build: {
              outDir: 'dist/app',
              rollupOptions: {
                  output: {
                      /** S-静态文件按类型分包 */
                      chunkFileNames: 'static/js/[name]-[hash].js',
                      entryFileNames: 'static/js/[name]-[hash].js',
                      assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
                      /** E-静态文件按类型分包 */
                      manualChunks(id) {  // 超大静态资源拆分
                          if (id.includes('node_modules')) {
                              return id.toString().split('node_modules/')[1].split('/')[0].toString();
                          }
                      }
                  }
              },
              terserOptions: {
                  //打包后移除console和注释
                  compress: {
                      drop_console: true,
                      drop_debugger: true,
                  },
              }
          }
      
      })