vue異步加載組件問(wèn)題

1.環(huán)境說(shuō)明：通過(guò)vue init初始化后項(xiàng)目?jī)H在router/index.js里修改如下

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)
const a='@/components/HelloWorld';
const HelloWorld = ()=> import(/* webpackChunkName: "group-foo" */ `${a}`);

// 如果這樣寫就沒(méi)事
// const HelloWorld = ()=> import(/* webpackChunkName: "group-foo" */ '@/components/HelloWorld');

export let router = new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

2.問(wèn)題

圖片好像不太能加載出來(lái)，附

[vue-router] Failed to resolve async component default: Error: Cannot find module '@/components/HelloWorld'.    

Error: Cannot find module '@/components/HelloWorld'.
    at webpackAsyncContext (eval at ./src/router lazy recursive ^.*$ (app.js:1111), <anonymous>:26:25)
    at HelloWorld (index.js?61a1:7)
    at eval (vue-router.esm.js?fe87:1709)
    at eval (vue-router.esm.js?fe87:1736)
    at Array.map (<anonymous>)
    at eval (vue-router.esm.js?fe87:1736)
    at Array.map (<anonymous>)
    at flatMapComponents (vue-router.esm.js?fe87:1735)
    at eval (vue-router.esm.js?fe87:1671)
    at iterator (vue-router.esm.js?fe87:1870)

但是這樣

const a='@/components/HelloWorld';
const HelloWorld = ()=> import(/* webpackChunkName: "group-foo" */ `${a}`);

修改成這樣就沒(méi)事，這是什么鬼？從昨天搞到現(xiàn)在了，也沒(méi)排查出原因，跪謝

const HelloWorld = ()=> import(/* webpackChunkName: "group-foo" */ '@/components/HelloWorld');