Laravel8使用webpack报错的解决方法

作者: 温新

分类: 【Laravel】

阅读: 4598

时间: 2021-04-28 15:30:30

Vue-Baberrage用它来做弹幕比较容易,那么安装后启动时报错了错误,如下:

<span style="box-sizing: border-box;padding-right: 0.1px"> Compiled with some errors <span style="box-sizing: border-box;color: rgb(119, 0, 136)">in</span> <span style="box-sizing: border-box;color: rgb(17, 102, 68)">2</span>.69s</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">ERROR <span style="box-sizing: border-box;color: rgb(119, 0, 136)">in</span> ./node_modules/vue-baberrage/dist/vue-baberrage.js <span style="box-sizing: border-box;color: rgb(17, 102, 68)">1</span>:78-95</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">Module not found: Error: Can<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'t resolve '</span>timers<span style="box-sizing: border-box;color: rgb(170, 17, 17)">' in '</span>/www/swooleItem/labarrage/node_modules/vue-baberrage/dist<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">BREAKING CHANGE: webpack < <span style="box-sizing: border-box;color: rgb(17, 102, 68)">5</span> used to include polyfills <span style="box-sizing: border-box;color: rgb(119, 0, 136)">for</span> <span style="box-sizing: border-box;color: rgb(51, 0, 170)">node</span>.js core modules by default.</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">This is no longer the case. Verify <span style="box-sizing: border-box;color: rgb(119, 0, 136)">if</span> you need this module and configure a polyfill <span style="box-sizing: border-box;color: rgb(119, 0, 136)">for</span> it.</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">If you want to include a polyfill, you need to:</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(0, 0, 204)">-</span> add a fallback <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'resolve.fallback: { "timers": require.resolve("timers-browserify") }'</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(0, 0, 204)">-</span> install <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'timers-browserify'</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">If you don<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'t want to include a polyfill, you can use an empty module like this:</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        resolve.fallback: { <span style="box-sizing: border-box;color: rgb(170, 17, 17)">"timers"</span>: <span style="box-sizing: border-box;color: rgb(34, 17, 153)">false</span> }</span>

对于这个错误,大概的知道是webpack的原因,但为什么报错,我就不知道了。我所有使用的版本是Laravel8。

一,安装

npm install vue-baberrage

二,使用

位置:resources/js/app.js

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(119, 0, 136)">import</span> { <span style="box-sizing: border-box;color: rgb(0, 0, 255)">vueBaberrage</span> } <span style="box-sizing: border-box;color: rgb(119, 0, 136)">from</span> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'vue-baberrage'</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">Vue</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">use</span>(<span style="box-sizing: border-box;color: rgb(0, 0, 0)">vueBaberrage</span>)</span>

三,启动时编译错误

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(51, 0, 170)">npm</span> run dev</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(170, 85, 0)"># 报错,如上</span></span>

解决方法

第一步:编辑webpack.mix.js

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(119, 0, 136)">const</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">mix</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">require</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'laravel-mix'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">mix</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">js</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'resources/js/app.js'</span>, <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'public/js'</span>)</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    .<span style="box-sizing: border-box;color: rgb(0, 0, 0)">vue</span>()</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    .<span style="box-sizing: border-box;color: rgb(0, 0, 0)">sass</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'resources/sass/app.scss'</span>, <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'public/css'</span>)</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 新增如下配置</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    .<span style="box-sizing: border-box;color: rgb(0, 0, 0)">webpackConfig</span>(<span style="box-sizing: border-box;color: rgb(0, 0, 0)">require</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'./webpack.config'</span>));</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)">~</span>                                                 </span>

第二步:创建wepack.config.js,并编辑如下内容

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">module</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">exports</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(0, 0, 0)">resolve</span>: {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(0, 0, 0)">fallback</span>: { <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(0, 0, 0)">"timers"</span>: <span style="box-sizing: border-box;color: rgb(34, 17, 153)">false</span> },</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(0, 0, 0)">fallback</span>: { <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(0, 0, 0)">"timers"</span>: <span style="box-sizing: border-box;color: rgb(0, 0, 0)">require</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">resolve</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">"timers-browserify"</span>) }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">};</span>

第三步:npm install

第四步:npm run dev

至此,问题解决

请登录后再评论