V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
black11black
V2EX  ›  问与答

求助, Vue 脚手架构建项目, alias 设置路径后仍然提示找不到

  •  
  •   black11black · 2020-02-12 18:04:33 +08:00 · 1130 次点击
    这是一个创建于 1506 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如题,vue 初学者,按照网上教学配置的,新建了一个空项目,最后得到 Failed to compile.

    整个操作复现如下: 1、安装 node 和 npm install -g @vue/cli ,脚手架版本 4.2 2、新建目录,然后 vue create project 3、cd project && npm install vue-router --save && npm install axios --save 4、处理配置文件

    整个目录结构如下:(忽略一些未改动的文件)

    \project
    ....\node_modules
    ....\public
    ....\src
        ....\assets
        ....\components
        ........blank.vue
        ....App.vue
        ....main.js
    ....vue.config.js
    

    其中,vue.config.js内容如下:

    module.exports = {
      configureWebpack: {
        resolve: {
          alias: {
            '@': 'src',
            'components': "@/components"
          }
        }
      }
    }
    

    blank.vue 内容如下:

    <template>
      <div>
        <h1>blank div</h1>
      </div>
    </template>
    
    <script>
    export default {
      name: 'blank',
      props: {
        msg: String
      }
    }
    </script>
    
    <style scoped>
    </style>
    

    App.vue 内容如下:

    <template>
      <div id="app">
        <blank></blank>
      </div>
    </template>
    
    <script>
    import blank from 'components/blank.vue'
    
    export default {
      name: 'App',
      components: {
        blank
      }
    }
    </script>
    
    <style>
    </style>
    

    ================main.js 未改动

    就是想跑个 helloworld,脚手架新创建的项目 npm run serve 是能正常跑起来的,但如上所示修改文件后得到错误提示

    Failed to compile.
    
    ./src/App.vue?vue&type=script&lang=js&     (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&)
    Module not found: Error: Can't resolve 'components/blank.vue' in 'C:\vue\project\src'
    

    如题,我不是很理解整个过程, 按照我的理解 vue.config.js 里已经设置 alias 过 components 的挂载了,我在 App.vue 里就应该直接写import *** from 'components/blank.vue'就可以了,不用写相对路径或者绝对路径才对。

    但是仍然找不到,请问是哪里出错了呢

    1 条回复    2020-02-12 18:06:57 +08:00
    black11black
        1
    black11black  
    OP
       2020-02-12 18:06:57 +08:00
    同样的配置,如果导入从
    `import blank from 'components/blank.vue'`
    改成
    ·import blank from './components/blank.vue'·

    就没问题了。
    但是用相对路径总感觉有问题啊
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3254 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 14:00 · PVG 22:00 · LAX 07:00 · JFK 10:00
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.