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

你可能感兴趣的:(vite.config.js之resolve.alias配置)