vite.config.js之resolve.alias配置

问题描述：

在引用组件时，可能是下面这样的，其中的路径是相对于当前页面的, 写起来会比较麻烦。

const routes = [
   {
           path: '/H5Editor',
           component: () => import('../views/H5Editor/H5Editor.vue')
   }
]
export default routes

解决方法

创建 import 或 require 的别名，来确保模块引入变得更简单。
当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会原封不动地被使用，因此无法被正常解析。

配置 resolve.alias ：

vite.config.js:

export default {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src/'),
    }
  }
};

即可@/views直接应用组件：

const routes = [
   {
           path: '/H5Editor',
           component: () => import('@/views/H5Editor/H5Editor.vue')
   }
]
export default routes

image.png

相关链接

resolve-alias