Vue项目构建时的一些bug(填坑填坑)

今天我们来说一下在刚刚写项目的时候遇到的一些问题，可能不注意的话就要花一些时间去找bug。

Module build failed: Error: F:\music-player\src\components\m-header\m-header.vue:12:9

来看报错显示：

./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-be498722","scoped":true,"hasInlineConfig":false}!./node_modules/stylus-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/m-header/m-header.vue
Module build failed: Error: F:\music-player\src\components\m-header\m-header.vue:12:9
8| <script>
9|  export default{}
10| </script>
11| <style scoped lang="stylus" rel="stylesheet/stylus">
12|  @import “@/common/stylus/variable”
---------------^
13|  @import “@/common/stylus/mixin”
14|  .m-header
15|    position: relative

failed to locate @import file @/common/stylus/variable.styl

at CachedPathEvaluator.visitImport (F:\music-player\node_modules\stylus-loader\lib\evaluator.js:157:21)
at CachedPathEvaluator.Visitor.visit (F:\music-player\node_modules\stylus\lib\visitor\index.js:28:40)
at CachedPathEvaluator.Evaluator.visit (F:\music-player\node_modules\stylus\lib\visitor\evaluator.js:160:18)
at CachedPathEvaluator.Evaluator.visitRoot (F:\music-player\node_modules\stylus\lib\visitor\evaluator.js:707:27)
at CachedPathEvaluator.Visitor.visit (F:\music-player\node_modules\stylus\lib\visitor\index.js:28:40)	

在遇到这个问题的时候，我已经将sass、stylus等依赖的文件进行安装，自己也谷歌、百度了一下，然后基本都是自己的stylus样式出了问题，对样式进行修改就行了，不过我自己的问题却是出现在webpack.base.conf.js上面，在这个里面进行别名配置，由于我的配置文件里面只有一个’vue$’: ‘vue/dist/vue.esm.js’,所以我就修改了自己的路径文件（相对路径），所以这个错误也就消失了。

当然，困惑我们的不是只有上面的问题，另一个错误就是：

Module build failed: Error: Unexpected "space" found.

在这个问题上，有人说是 nodejs及stylus-loader版本问题的影响，但是，解决这个问题的时候也就做了一点小小的改动，解决方案如下： 1、各种stylus依赖都已经安装完成，不过还是存在着问题 2、写前端代码我用的是sublime Text ，将页面代码缩进设置为：转化为空格缩进 / 转化为tab缩进，如下图所示： 然后就可以在浏览器上面看到我们实现的代码效果了，很开森。

在使用Vue构建项目的时候，我们或多或少的会遇到一些坑，等待我们一步一步的去填它，努力吧，毕竟前面还有填不完的坑。