十一、Vue3+Ts+Vite+AntdUI构建后台基础模板——项目构建（完结）

注意：node v16.15.1

一、解决打包构建报错

1. 升级vue-tsc，修改vue-tsc版本号到最新，并引入@types/node依赖到项目
2. vue-tsc跳过，node_modules的检测，scripts中加入--skipLibCheck

{
    "name": "vue3-admin",
    "version": "0.0.0",
    "scripts": {
        ......
        "build": "vue-tsc --noEmit --skipLibCheck && vite ......
    },
    "dependencies": {
        "@types/node": "^18.8.3",
        ......
    },
    "devDependencies": {
        ......
        "vue-tsc": "^1.0.3"
    }
}

3. npm i
4. 修改tsconfig.json

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "moduleResolution": "node",
        "strict": true,
        "jsx": "preserve",
        "sourceMap": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "lib": ["esnext", "dom"],
        "noImplicitAny": false,
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"]
        },
        "types": ["pinia-plugin-persist", "node"]
    },
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

5. 解决Header.vue中store.userInfo的类型错误
6. 修改src\store\modules\user.ts

import { defineStore } from 'pinia';

const useUserStore = defineStore('user', {
    state: () => {
        return {
            token: '',
            userInfo: <{ avatar?: string; name?: string }>{},
            routes: [],
        };
    },
    actions: {
        ......
    },
    persist: {
        .....
    },
});

export default useUserStore;

二、配置Mock生产环境

1. Mock目录下新建index.ts

import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';
import Login from './login';

export function setupProdMockServer() {
    createProdMockServer([...Login]);
}

2. 修改mian.ts

import { createApp } from 'vue';
import App from '@/App.vue';
import router from '@/router';
import { createPinia } from 'pinia';
import piniaPersist from 'pinia-plugin-persist';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import { setupProdMockServer } from '../mock';

const app = createApp(App);
const pinia = createPinia();
pinia.use(piniaPersist);

if (process.env.NODE_ENV === 'production') {
    setupProdMockServer();
}

app.use(router);
app.use(Antd);
app.use(pinia);
app.mount('#app');

3. 修改vite.config.ts

import vue from '@vitejs/plugin-vue';
import path from 'path';
import { defineConfig } from 'vite';
import { viteMockServe } from 'vite-plugin-mock';

export default defineConfig({
    plugins: [
        vue(),
        viteMockServe({
            supportTs: true,
            prodEnabled: true,
            injectFile: path.resolve('src/main.ts'),
        }),
    ],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src'),
        },
    },
});

三、打包构建

1. (如配置github pages)需要修改vite.config.ts加入base配置

import vue from '@vitejs/plugin-vue';
import path from 'path';
import { defineConfig } from 'vite';
import { viteMockServe } from 'vite-plugin-mock';

export default defineConfig({
    base: '/vue3-admin-template/',
    plugins: [
        vue(),
        viteMockServe({
            supportTs: true,
            prodEnabled: true,
            injectFile: path.resolve('src/main.ts'),
        }),
    ],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src'),
        },
    },
});

2. 打包构建执行命令

npm run build

3. 预览构建的项目

npm run serve

四、源代码地址

https://github.com/jiangzetian/vue3-admin-template

五、视频演示及源码

本文演示视频：点击浏览

更多前端内容欢迎关注公众号：天小天个人网