vue.js - webpack打包时Unknown option: direct.optional，该如何解决？

问题描述

问 题

webpack打包时找不到vue文件，该如何解决？报了以下错误:
ERROR in ./src/user_entry.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./user_info in D:
excenergy-javaheatingwebappsrc
@ ./src/user_entry.js 2:14-36

网友提示加了：

 resolve: {
          extensions: ['', '.js', '.vue']
      },

又报了如下错误：

**ERROR in ./~/babel-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./
rc/user_info.vue
Module build failed: Error: Cannot find module './lib/virtual-types'**

at Function.Module._resolveFilename (module.js:325:15)
at Function.Module._load (module.js:276:25)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object.<anonymous> (D:\excenergy-java\heating\webapp\node_modules\babel-

reset-stage-2node_modulesbabel-plugin-transform-class-propertiesnode_modules
babel-helper-function-namenode_modulesbabel-traverselibpathindex.js:13:21)

at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object.<anonymous> (D:\excenergy-java\heating\webapp\node_modules\babel-

reset-stage-2node_modulesbabel-plugin-transform-class-propertiesnode_modules
babel-helper-function-namenode_modulesbabel-traverselibindex.js:10:13)

at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object.<anonymous> (D:\excenergy-java\heating\webapp\node_modules\babel-

reset-stage-2node_modulesbabel-plugin-transform-class-propertiesnode_modules
babel-helper-function-namenode_modulesbabel-templatelibindex.js:69:22)

at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object.<anonymous> (D:\excenergy-java\heating\webapp\node_modules\babel-

reset-stage-2node_modulesbabel-plugin-transform-class-propertiesnode_modules
babel-helper-function-namelibindex.js:63:46)

at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)

@ ./src/user_info.vue 3:17-116

目录结构：

------------------------------------user_entery.js----------------------------------------------

var Vue=require('vue');
var user_info=require('./user_info');
new Vue({
    el:'body',
    components:{
        app:user_info
    }
});

------------------------------------user_info.vue---------------------------------------------

<style></style>
<template>
    <appheader></appheader>
</template>
<script>
    module.exports={
        components:{
            'appheader':require('./vue_header.vue');
        }
    }
</script>

------------------------------------webpack.config.js---------------------------------------------

var webpack=require('webpack');
var vue=require('vue-loader');
module.exports={
    //页面入口文件配置
    entry:{
        userInfo:"./src/user_entry.js"
    },
    //输出配置
    output:{
        path:"dist",
        filename:"[name].bundle.js"
    },
     resolve: {
      extensions: ['', '.js', '.vue']
      },
    module:{
        loaders:[
        {test:/\.vue$/,    loader:'vue'}
        ]
    }
}

解决方案

loader加上这个babel试试:

module:{
        loaders:[
        {test:/\.vue$/,    loader:'vue'},
        {test: /\.js$/,    loader: 'babel', query: {compact: false}}
        ]

这篇关于vue.js - webpack打包时Unknown option: direct.optional，该如何解决？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！