vue-loader不起效果,已经添加过new VueLoaderPlugin()了
回答区的答案都进行尝试了,依然不能够解决><
回答区的答案都进行尝试了,依然不能够解决><
2018-06-06
首先最新的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来处理
最终的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://vue-loader.vuejs.org/zh/guide/#%E6%89%8B%E5%8A%A8%E9%85%8D%E7%BD%AE
@
装了“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" }
所以这该如何解决呢?
举报