2017-06-01 56 views
0

擴展名嗨,我用vue和webpack創建了新項目,但我想加載模板爲.html而不是.vue。我得到錯誤「您可能需要適當的加載器來處理此文件類型」中webpack.base.conf.js和我有webpack更改.vue

var path = require('path') 
 
var utils = require('./utils') 
 
var config = require('../config') 
 
var vueLoaderConfig = require('./vue-loader.conf') 
 

 
function resolve(dir) { 
 
    return path.join(__dirname, '..', dir) 
 
} 
 

 
module.exports = { 
 
    entry: { 
 
     app: './src/main.js' 
 
    }, 
 
    output: { 
 
     path: config.build.assetsRoot, 
 
     filename: '[name].js', 
 
     publicPath: process.env.NODE_ENV === 'production' ? 
 
      config.build.assetsPublicPath : config.dev.assetsPublicPath 
 
    }, 
 
    resolve: { 
 
     extensions: ['.js', '.html', '.json'], 
 
     alias: { 
 
      'html$': 'vue/dist/vue.esm.js', 
 
      '@': resolve('src') 
 
     } 
 
    }, 
 
    module: { 
 
     rules: [ 
 
      { 
 
       test: /\.html$/, 
 
       loader: 'vue-loader', 
 
       options: vueLoaderConfig 
 
     }, 
 
      { 
 
       test: /\.js$/, 
 
       loader: 'babel-loader', 
 
       include: [resolve('src'), resolve('test')] 
 
     }, 
 
      { 
 
       test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 
 
       loader: 'url-loader', 
 
       options: { 
 
        limit: 10000, 
 
        name: utils.assetsPath('img/[name].[hash:7].[ext]') 
 
       } 
 
     }, 
 
      { 
 
       test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 
 
       loader: 'url-loader', 
 
       options: { 
 
        limit: 10000, 
 
        name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 
 
       } 
 
     } 
 
    ] 
 
    } 
 
}

+0

我不知道我得到你想要做的。你是否試圖加載一個包含在.html文件中的模板而不是.vue文件來將它放到Vue組件中?如果是的話,那看起來不是一個好主意。爲什麼不只是擴展/使用mixin模板.vue組件? – Cobaltway

回答

1
npm install -s html-loader 

,然後在配置的WebPack,添加到其他規則:

{ 
    test: /\.html$/, 
    use: 'html-loader', 
},