webpack中import导入vue组件报错Cannot find module ‘@/views/xxx.vue’”

在前后端分离架构中，vue组件模块路径通常通过api来获取，然后在vue中加载，这里路径就是一个变量。

在使用webpack的import和require加载vue组件模块时，明明路径对了，还是有“Error：Cannot find module '@/views/xxx.vue’”的错误，后来经过查找资料，找到了问题所在：
​

// 方式一：固定字符串，正常运行
() => import("@/views/AboutView.vue")
​
// 方式二：全变量，报错
const component = "@/views/AboutView.vue"
()=> import(component)
​
// 方式三：字符串 + 变量，正常运行，提示，import中使用的反引号`，不是单引号也不是双引号！
const component = "views/AboutView"
()=> import(`@/${component}.vue`)

​
测试运行方式二报错信息如下：
​

因为，webapck中用于引入component的import的参数，是不支持 完全使用变量 的，也就是必须有字符串。

起始路径一定要是字符串，即@/，文件后缀也要是字符串，通过扩展名来识别文件类型，这样Typescript才能解析，而且import中使用的反引号`，不是单引号也不是双引号！