vue 中使用import写法的问题

xinbear
  • 333

vue项目
路由是由后端动态返回的
我给返回的路由中字段component 引入组件

const url = data.menu[i].children[c].component
// url是.vue文件路径
data.menu[i].children[c].component = () => import(`@/views/${url}`)

上面的方法是正常的
但我换一下写法

// 将@/views/放到 url里
const url = '@/views/' + data.menu[i].children[c].component
data.menu[i].children[c].component = () => import(`${url}`)

页面就会报错

clipboard.png

想了半天没想明白这是为什么,求大佬解答

回复
阅读 2.1k
2 个回答

一般 vue 项目copy过来的 webpack 默认配置, 会将 "@" 符号转化为 '/src'
所以 @/views/${url} 实际路径应该是 /src/views/${url}
这个是编译时做的, 如果整个url都是变量, webpack编译的时候无法知道里面包含了 '@' 因此没有替换, 导致最终路径是不对的

从你给出的代码,还真没看出问题。

你对比下, 第二个里面的url 是否等于 第一个里面的 @/views/${ulr}

只能运行快看看是不是相等了

宣传栏