vue 解决uglifyjs-webpack-plugin打包出现报错的问题
楼主最新对已做项目进行打包优化，配置了打包环境下去除console.log语句插件---使用uglifyjs-webpack-plugin
具体代码如下
npm install uglifyjs-webpack-plugin -D
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
configureWebpack: config => {
if (isProduction) {
config.plugins = config.plugins.concat(
[
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true,
drop_console: true,
},
},
sourceMap: false,
parallel: true,
})
]
)
}
然后打包发现报错
⠧ Building for production... ERROR Failed to compile with 1 errors 上午10:10:12 error assets/js/about.e1f1ea37.js from UglifyJs Unexpected token: keyword (const) [assets/js/about.e1f1ea37.js:13062,0] ERROR Build failed with errors. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! thua@0.1.0 build: `vue-cli-service build --mode production` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the thua@0.1.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/chenya/.npm/_logs/2019-01-15T02_10_12_281Z-debug.log
把new UglifyJsPlugin插件注释掉即可成功打包。
但是，楼主我一点都不乐意，凭啥不让我用UglifyJsPlugin插件！
于是不求人的我开始上网查资料，搜索Unexpected token: keyword (const)，搜索列表点第一个进去看，大致说是因为项目有的文件没有es6转es5，即还存在const变量名。
？？？？（黑人问号）。我的vue配置是自动用babel把es6转es5的呀，搞锤子呢。
于是脑洞回想一下，是不是哪里有文件打包进去没有用到babel？？？
咦。。。。。。。是不是，。。那个。。。。node_modules下的依赖。。。。。
再仔细想想，看看代码。。。。。有一个animejs（用于动效）、还有一个vue-particles （canvas用于登录页背景特效）
找到问题了，下一步就是如何显示的把node_modules下的依赖用babel 转译。
楼主用的vue-cli3脚手架，翻山越岭的查找vue-cli3的官方资料，终于找到你。。。。。
transpileDependencies Type: Array<string | RegExp> Default: []
默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。
还好我没放弃~~~~
transpiledependencies参数接受一个数组，数组里可以是字符串也可以正则表达式。
附上楼主的配置
transpileDependencies: [
'vue-particles',
'animejs'
],
完美解决~
开开心心下班回家~~~~~
2020年06月11日08:57:07 更新
楼主已弃用 uglifyjs-webpack-plugin 插件啦。现在用的是 terser-webpack-plugin
以上这篇vue 解决uglifyjs-webpack-plugin打包出现报错的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
浅谈webpack编译vue项目生成的代码探索
本文介绍了webpack编译vue项目生成的代码探索,分享给大家,具体如下: 前言 往 main.js 里写入最简单的 vue 项目结构如下 import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', template: '<App/>', components: { App } }) App.vue 如下 <template> <div id="app"> &l
-
详解基于vue-cli优化的webpack配置
最近的项目度过了开始忙碌的基建期,也慢慢轻松下来,准备记录一下自己最近webpack优化的措施,希望有温故知新的效果. 项目采用的是vue全家桶,构建配置都是基于vue-cli去改进的.关于原始webpack配置大家可以看下这篇文章vue-cli#2.0 webpack配置分析,文章基本对于文件每行代码都做了详细的解释,有助于更好的理解webpack. 仔细总结了一下,自己的优化基本还是网上流传的那几点 通过 externals 配置来提取常用库,引用cdn 合理配置CommonsChunkPl
-
关于vue-cli 3配置打包优化要点（推荐）
配置路由懒加载,封装了异步组件引入的方法,接收一个地址做参数 /** * 返回异步组件 * @tips 请注意页面只能挂载在views文件下,非此路径请勿使用 */ const AsyncComponentHook = (path: String): Function => (): any => { // 通过 webpack 的内联注释,设置模块名 let component = import(/* webpackChunkName: "view-[request]" *
-
vue webpack打包优化操作技巧
临近春节,公司很多同事都提前回家过年,剩余人员根据禅道去修改bug,当bug修正完毕以后,我们需要重新打包给运维,上测试服给测试同事提测,但是由于项目本体比较庞大,所以打包时间太过漫长(二十五分钟以上:sob:),所以有了打包优化的想法(其实想法早就有了,但是因为平时工作计划比较充实,所以一直没有去完成这个工作),这次正好有时间,所以去重新考虑了这个问题! webpack是react项目标配的打包工具,和NPM搭配起来使用管理模块实在非常方便. webapck 把所有的静态资源都看做是一个
-
vue 解决setTimeOut和setInterval函数无效报错的问题
1.在vue项目中的js代码语法与之前使用js和jquery还是有所出入的,现遇到一个点击按钮出现倒计时30S的效果 相信大家对着两个函数都陌生,就是一个定时器,setTimeOut只执行一次,而setInterval会重复执行 需要注意的是:在setInterval不用的时候一定要用clearSetInterval关闭定时器. 2.按照最原始的倒计时效果,实现如下: //获取30s 控制操作倒计时 time(){ if(this.timeWait <= 0){ this.timeWait =
-
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
楼主最新对已做项目进行打包优化,配置了打包环境下去除console.log语句插件---使用uglifyjs-webpack-plugin 具体代码如下 npm install uglifyjs-webpack-plugin -D const UglifyJsPlugin = require('uglifyjs-webpack-plugin') configureWebpack: config => { if (isProduction) { config.plugins = config.pl
-
vue解决使用webpack打包后keep-alive不生效的方法
问题是这样的,我使用webpack的npm run dev运行的时候,keep-alive路由缓存是有效的,但是我npm run build,把文件放到实际的项目中去的时候,会有如下的问题: 路由如下: var menus = [ { path: '/user', name: '用户', component: '/user', redirect: '/user/index1', icon: 'fa-bandcamp', meta: { keepAlive: false }, children:
-
解决vue v-for 遍历循环时key值报错的问题
一 .问题如下: [Vue warn] Avoid using non-primitive value as key, use string/number value instead. non-primitive表示的是对象 这里的[Vue warn]是指不要用对象或是数组作为key,用string或number作为key. :key相当于是索引的作用,提高循环性能,如果循环量较小,不写也可以的. 以上这篇解决vue v-for 遍历循环时key值报错的问题就是小编分享给大家的全部内容了,希望能
-
vue使用prop可以渲染但是打印台报错的解决方式
vue属性传递时有时会报下述错误 vue.esm.js?f959:610 [Vue warn]: Error in render: "TypeError: Cannot read property 'RegistrationAuthority' of undefined" found in ---> <DialogHistory> at src/components/tools/dialog_history.vue <NurseInfor> at src/
-
Vue使用Echarts图表多次初始化报错问题的解决方法
目录 问题 方法一 销毁实例 方法二 不要频繁创建实例 总结 问题 Vue项目中需要用Echarts的柱状图显示数据,并且每次搜索要更新柱状图. 这时候小编发现在控制台会出现这样的报错: 原来的代码是这样的,页面挂载和搜索时都会调用init方法 initChart (dataSet = [5, 20, 36, 10, 10, 20]) { this.barChart = echarts.init(this.$refs.chartBox) const option = { title: { tex
-
Vue3打包部署报错的解决方案
目录 Vue3打包部署报错 vue3 vite 打包部署后,访问报错 Vue3打包部署报错 通常情况下,我们直接npm run build后的代码可以直接部署在服务器上,以便老板远程访问.但是今天写了个简单的demo发现部署后不能直接访问.作为一个菜鸟,被领导催的也是心急如焚. 但奇怪的是,vscode的open live server却没有任何问题. 冥思苦想苦思冥想无法解决,问了同事大佬,原来是要在打包前的vue config下加一下publicPath:‘./’: 于是重新打包,再部署到服
-
解决VueCil代理本地proxytable无效报错404的问题
前言 因为项目中遇到了这个bug:Vue cil2中配置代理proxytable成功,却无效报错404,在后端和代理都配置无误的情况下,还是报404,先已解决,特记录,希望能帮助到他人: 正文 1. 为什么要使用代理? 代理的作用是:把请求代理转发到其他服务器的中间件: 例如:我们当前主机为http://localhost:8080/,现在我们有一个需求,如果我们请求/api,我们不希望由3000来处理这个请求,而希望由另一台服务器https://www.example.org/api来处理这个
-
vue第三方库中存在扩展运算符报错问题的解决方案
目录 vue第三方库中存在扩展运算符报错问题 解决方案 1.引入babel依赖 2.在vue项目的src/.babelrc文件中(没有自己创建)下修改 解决方法: vue第三方库中存在扩展运算符报错问题 之前一篇文章说过,vue里用到了es6的拓展(...)语法,然后编译一直报错 unExpected token 解决方案 1.引入babel依赖 npm install babel-plugin-transform-object-rest-spread npm install babel-pre
-
解决VUEX兼容IE上的报错问题
在IE 上使用Vuex的过程中,出现如下错误: SCRIPT5022: [vuex] vuex requires a Promise polyfill in this browser. 解决方法: 1.先安装babel-polyfill npm install --save-dev babel-polyfill 2.webpack.base.config.js下修改文件 entry: { 'babel-polyfill': 'babel-polyfill', app: './src/main.j