为了账号安全,请及时绑定邮箱和手机立即绑定

vue-loader不起效果,已经添加过new VueLoaderPlugin()了


https://img1.sycdn.imooc.com//5b17bc850001b11606420604.jpg

https://img1.sycdn.imooc.com//5b17bc850001e79205720501.jpg

https://img1.sycdn.imooc.com//5b17bc850001052605730457.jpg

回答区的答案都进行尝试了,依然不能够解决><

正在回答

9 回答

加粗之后为什么消失

我的 fRom

1 回复 有任何疑惑可以回复我~
#1

qq_流年是染指的青春_0 提问者

真让你说对了,,单词打错了。 丢老脸了
2018-06-08 回复 有任何疑惑可以回复我~
#2

沐慕穆 回复 qq_流年是染指的青春_0 提问者

兄弟,你是那个单词打错了,我现在真没看出来啊,现在还没解决呢
2018-10-22 回复 有任何疑惑可以回复我~

仔细看3楼的方法,能解决问题,刚刚处理好这个'无法解析“app.vue”内“style”' 这个问题

0 回复 有任何疑惑可以回复我~

解决了吗,什么办法

0 回复 有任何疑惑可以回复我~

首先最新的webpack使用vue-loader时还要在配置中添加 Vue Loader 的插件。

// webpack.config.jsconst VueLoaderPlugin = require('vue-loader/lib/plugin')module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件!
    new VueLoaderPlugin()
  ]}

然后如果添加了插件还是报错如下错误的话,表示不能处理.vue文件里<style>的部分,还要添加vue-style-loader来处理

https://img1.sycdn.imooc.com//5b7d3e0f0001cc3106010519.jpg

最终的webpack.config.js如下:

const path = require('path');const VueLoaderPlugin = require('vue-loader/lib/plugin');module.exports = {    entry: path.join(__dirname, 'src/index.js'),    output: {        filename: 'bundle.js',        path: path.join(__dirname, 'dist')    },    module: {        rules: [{                test: /\.vue$/,                loader: 'vue-loader'            },            {                test: /\.css$/,                use: ['vue-style-loader', 'css-loader']            }        ]    },    plugins: [        new VueLoaderPlugin()    ]};

https://img1.sycdn.imooc.com//5b7d402e0001ec6c07860610.jpg

参考:https://vue-loader.vuejs.org/zh/guide/#%E6%89%8B%E5%8A%A8%E9%85%8D%E7%BD%AE

3 回复 有任何疑惑可以回复我~

resolve: {

    alias: { 'vue$': 'vue/dist/vue.esm.js' }

}

需要在配置文件里加这个,解析别名


0 回复 有任何疑惑可以回复我~

@

装了“css-loader”,也正确配置了“VueLoaderPlugin”,但无法解析“app.vue”内“style”标签里的样式文本,该如何解决?

主要报错内容如下:

Module parse failed: Unexpected character '#' (16:0)
You may need an appropriate loader to handle this file type.
|
|
> #test {
|     color: red;
| }

删除“app.vue”的“style”内容后,运行 `npm run build `也确实不再报错了。

我的依赖包如下:

"dependencies": {
    "css-loader": "^0.28.11",
    "vue": "^2.5.16",
    "vue-loader": "^15.2.4",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.8"
}

所以这该如何解决呢?

2 回复 有任何疑惑可以回复我~
#1

oooo_Bnose

正确配置style结尾的文件
2018-07-07 回复 有任何疑惑可以回复我~
#2

Civo

层主解决了吗?我也遇到一样的问题。
2018-07-31 回复 有任何疑惑可以回复我~
#3

玥玥颜

我也遇见这个问题了,你解决了么
2019-05-08 回复 有任何疑惑可以回复我~

尝试 const {vueLoadPlugin} = require('vue-oader')

1 回复 有任何疑惑可以回复我~
import Vue  'vue'
import App  './app.vue'
楼主,检查一下你代码是不是单词拼写错误?


0 回复 有任何疑惑可以回复我~

版本问题吧 用以下版本试试  

"dependencies": {
"css-loader": "^0.28.7",
"vue": "^2.5.13",
"vue-loader": "^13.6.0",
"vue-template-compiler": "^2.5.13",
"webpack": "^3.10.0"
}


0 回复 有任何疑惑可以回复我~
#1

qq_流年是染指的青春_0 提问者

谢谢回答。 按照你的修改了,但还是报错。 "dependencies": { "css-loader": "^0.28.7", "vue": "^2.5.13", "vue-loader": "^13.6.0", "vue-template-compiler": "^2.5.13", "webpack": "^3.10.0" }, "devDependencies": { "webpack-cli": "^3.0.4" }
2018-06-07 回复 有任何疑惑可以回复我~
#2

qq_流年是染指的青春_0 提问者

错误信息: ERROR in ./src/index.js 1:11 Module parse failed: Unexpected token (1:11) You may need an appropriate loader to handle this file type. > import Vue form 'vue' | import App form './app.vue'
2018-06-07 回复 有任何疑惑可以回复我~
#3

慕设计2534692 回复 qq_流年是染指的青春_0 提问者

兄弟,我也一样,你解决了吗?
2018-06-15 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

vue-loader不起效果,已经添加过new VueLoaderPlugin()了

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号