vue3-使用vite构建vue3+ts项目-设置路径别名@+打包后index.html白板问题

一、设置路径别名

1.在vite.config.ts文件defineConfig配置

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    //设置路径别名
    alias: {
      '@': resolve(__dirname, './src'),
      '@P': resolve(__dirname, './src/page'),
      '*': resolve('')
    }
  },

  base: './'
});

2.在tsconfig.json文件的compilerOptions配置baseUrl和paths

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@P/*": ["src/page/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

二、打包后index.html白板问题

在vite.config.ts文件defineConfig配置base: './'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    //设置路径别名
    alias: {
      '@': resolve(__dirname, './src'),
      '@P': resolve(__dirname, './src/page'),
      '*': resolve('')
    }
  },
  base: './'
});