2017-04-23 147 views
1
外部模板文件

我使用VUE-CLI用的WebPack模板,當我分割在不同的文件中的模板文件,並運行npm run unityarn run unit,我得到這個錯誤:單元測試與Vue公司

$ yarn run unit 
yarn run v0.21.3 
$ cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run 
Hash: a52075458d6736c6b5a6 
Version: webpack 2.4.1 
Time: 2543ms 
    Asset  Size Chunks     Chunk Names 
index.js 1.05 MB  0 [emitted] [big] index.js 
chunk {0} index.js (index.js) 396 kB [entry] [rendered] 
    [0] ./src/components/Hello.vue 1.63 kB {0} [built] 
    [1] ./~/vue/dist/vue.esm.js 247 kB {0} [built] 
    [2] ./src/router/index.js 1.51 kB {0} [optional] [built] 
    [4] ./src/assets/logo.png 9.17 kB {0} [built] 
    [5] ./src/App.vue 1.56 kB {0} [optional] [built] 
    [8] (webpack)/buildin/global.js 509 bytes {0} [built] 
    [9] ./src ^\.\/(?!main(\.js)?$) 324 bytes {0} [built] 
    [10] ./test/unit/specs \.spec$ 177 bytes {0} [built] 
    [11] ./test/unit/index.js 452 bytes {0} [built] 
    [12] ./test/unit/specs/Hello.spec.js 573 bytes {0} [optional] [built] 
    [13] ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 1.39 kB {0} [built] 
    [14] ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Hello.vue 1.79 kB {0} [built] 
    [24] ./~/vue-style-loader!./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"id":"data-v-01ff506a","scoped":true,"hasInlineConfig":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Hello.vue 1.66 kB {0} [built] 
    [25] ./~/vue-style-loader!./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"id":"data-v-bef6f4c0","scoped":false,"hasInlineConfig":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 1.62 kB {0} [built] 
    [27] ./src/components/Hello.pug 239 bytes {0} [optional] [built] [failed] [1 error] 
    + 13 hidden modules 

WARNING in ./src/components/Hello.pug Module parse failed: /home/jmanuelrosa/Developer/test-vue/src/components/Hello.pug Unexpected token (1:0) You may need an appropriate loader to handle this file type. | .hello | h1 {{ msg }} | h2 Essential Links @ ./src ^./(?!main(.js)?$) @ ./test/unit/index.js

我使用基本的Hello示例進行嘗試,並得到相同的錯誤。這是我與哈巴狗模板組件(我已經安裝了哈巴狗太):

<template lang='pug' src='./Hello.pug'></template> 

<script> 
export default { 
    name: 'hello', 
    data() { 
    return { 
     msg: 'Welcome to Your Vue.js App' 
    } 
    } 
} 
</script> 

<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped> 
h1, h2 { 
    font-weight: normal; 
} 

ul { 
    list-style-type: none; 
    padding: 0; 
} 

li { 
    display: inline-block; 
    margin: 0 10px; 
} 

a { 
    color: #42b983; 
} 
</style> 

而且哈巴狗模板:

.hello 
    h1 {{ msg }} 
    h2 Essential Links 
    ul 
    li 
     a(href='https://vuejs.org', target='_blank') Core Docs 
    li 
     a(href='https://forum.vuejs.org', target='_blank') Forum 
    li 
     a(href='https://gitter.im/vuejs/vue', target='_blank') Gitter Chat 
    li 
     a(href='https://twitter.com/vuejs', target='_blank') Twitter 
    br 
    li 
     a(href='http://vuejs-templates.github.io/webpack/', target='_blank') Docs for This Template 
    h2 Ecosystem 
    ul 
    li 
     a(href='http://router.vuejs.org/', target='_blank') vue-router 
    li 
     a(href='http://vuex.vuejs.org/', target='_blank') vuex 
    li 
     a(href='http://vue-loader.vuejs.org/', target='_blank') vue-loader 
    li 
     a(href='https://github.com/vuejs/awesome-vue', target='_blank') awesome-vue 

這個問題它與#531

相關的。在這個問題上,用戶說解決方案是更改擴展,並使用tpp.html,但是,與dev或環境有什麼不同?我需要爲業力安裝另一個插件?

謝謝!

回答

0

我解決它增加更多的裝載機:d

module: { 
    rules: [ 
    { 
     test: /\.pug/, 
     use: [ 
     'html-loader', 
     'pug-loader?sourceMap' 
     ] 
    }, 
    { 
     test: /\.css$/, 
     use: [ 
     'style-loader', 
     { 
      loader: 'css-loader', 
      options: { 
      importLoaders: 1 
      } 
     }, 
     'postcss-loader' 
     ] 
    } 
}