Vue中import与@import的区别及使用场景说明

import Vue from 'vue'

import login from '../views/login/login.vue'
import './styles/index.less'

import Vant from 'vant'

npm install --save-dev @babel/plugin-syntax-dynamic-import

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    '@babel/plugin-syntax-dynamic-import'
  ]
}

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
//import具有变量提升机制，使用箭头函数限制作用域，实现懒加载
  { path: '/login', component: ()=> import('路由组件的路径') }
]
const router = new VueRouter({
  routes
})
export default router

@import './icon.less';'

// vite.config.js 将@替换成./src
resolve: {
		alias: [
			{ find: /^~/, replacement: '' },
			{ find: '@', replacement: resolve(__dirname, './src') }
		]
	},

import {xxx} from '@/a/b/c'

// /router/index.js
import Home from '@views/home/index.vue'

// tsconfig.json
{
  "compilerOptions": {
    "target": xxx;
    "baseURL": "./",
    "paths": {
      "@/*": ["./src/*"]
},

import xx from '@xxx'