vue3+ts(vue)----configuration @alias

vue3+ts(vue)----configuration @alias

1. Install vite and @vitejs/plugin-legacy in the project:

npm install vite @vitejs/plugin-legacy --save-dev

2. Find the tsconfig.json file in the root directory of the project, and add the following configuration in compilerOptions:
(where baseUrl is the base path, which is used to resolve the base directory of non-relative module paths. paths contains multiple mappings for mapping different module paths.)

{
    
    
  "compilerOptions": {
    
    
    "baseUrl": ".",
    "paths": {
    
    
      "@/*": ["src/*"],
    },
    ...
  },
  ...
}

3. Use the @vitejs/plugin-legacy plugin in vite.config.ts and configure the @ alias in alias:

import {
    
     defineConfig } from 'vite';
import legacy from '@vitejs/plugin-legacy';

export default defineConfig({
    
    
  plugins: [
    legacy({
    
    
      targets: ['defaults', 'not IE 11'], // 支持的浏览器版本
    }),
  ],
  resolve: {
    
    
    alias: {
    
    
      '@': '/src',
    },
  },
});

4. Use in the page: (example)

import {
    
     createApp } from 'vue';
import App from '@/App.vue';

createApp(App).mount('#app');