如题,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
black11black OP 同样的配置,如果导入从
`import blank from 'components/blank.vue'` 改成 ·import blank from './components/blank.vue'· 就没问题了。 但是用相对路径总感觉有问题啊 |