vue.js - 解决vue-cli打包后自动压缩代码

当我们用vue脚手架做完项目后,npm run build打包之后,

有没有查看源码,全是压缩好的。但是我就不想让它压缩,该怎么办呢?

困惑了几天,查了各种资料。终于终于...

来,上干货:

首先,我们得了解一点点webpack的知识。

webpack中压缩js 的插件叫 uglifyjs-webpack-plugin,

压缩css 的插件叫 optimize-css-assets-webpack-plugin

然后我们找到/build/webpack.prod.conf.js 文件,

然后你会发现:

const OptimizeCSSPlugin = require(‘optimize-css-assets-webpack-plugin‘)
const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin‘)

然后我们就可以在页面中搜索OptimizeCSSPlugin 和 UglifyJsPlugin 这两个关键词所在的地方

配置如下:

    // css 压缩代码,将下面代码注释掉
    new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }
    }),
   // 压缩js代码,将下面代码注释掉
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),

只要将上面代码注释掉,npm run build 你就会发现,欧了。

然后是html 了,

配置如下:

new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === ‘testing‘
        ? ‘index.html‘
        : config.build.index,
      template: ‘index.html‘,
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },

这里我们将上面的 minify 改成 minify:false

是的,就可以了。

原文地址:https://www.cnblogs.com/lafitewu/p/8309305.html

时间: 2024-10-29 21:12:54

vue.js - 解决vue-cli打包后自动压缩代码的相关文章

Vue.js起手式+Vue小作品实战

本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑的代码以供练习和测试之用:在最后,我参考SegmentFault上的一篇技博,对Vue进行初入的实战,目的是将新鲜学到的知识立即派上用场:如果你还是前端的小白,相信这篇文章可能会对产生一些帮助和引起思想的碰撞,因为大家的学习历程是相似的,遇到的困惑也有一定的共通性,如果文章出现谬误之处,欢迎各位童鞋

js弹框3秒后自动消失

开发中有时候会需要最出弹框后,过几秒自动消失的效果,下面给大家分享一下我自己做的一个小案例. 案例中的弹框使用的是bootstrap里面的模态框,实现自动消失则用的是js中的setInterval方法.该弹框使用了jquery-ui中的draggable方法,可拖动. 目录结构如下: 下面是案例代码: demo.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti

[vue遇错记录] vue.js:569 [Vue warn]: Cannot find element: #app

写了一个很简单的界面,console提示:vue.js:569 [Vue warn]: Cannot find element: #vue-app.找了半天才发现原因: <script src="../vue.js"></script> <div id="app"> {{ message }} </div> <script src="app.js"></script> <

Gradle打包后自动推送到FTP服务器

gradle打包后自动推送到FTP服务器 1.使用Gradle生成APK Android Studio项目的根目录下有一个gradle.properties文件,专门用来配置全局键值对数据:在该文件中添加如下内容: KEY_PATH = D:/KeyStorePath/keystore/keystore.jks KEY_PASS = pwdkeystore ALIAS_NAME = keyAlias ALIAS_PASS = pwdkeyAlias 编辑app/build.gradle文件,在a

Xcode: Run Script 的运用使build打包后自动+1

背景: 每次打包都要build+1处理,比较麻烦,使用 Run Script 的运用使build打包后自动+1 0. 使用xcode 添加run Script 然后就可以添加Run Script了 1.每次构建的时候build号自增 if [ $CONFIGURATION == Release ]; then echo "当前为 Release Configuration,开始自增 Build" plist=${INFOPLIST_FILE} buildnum=$(/usr/libex

js 引入Vue.js实现vue效果

拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果: html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, u

解决vue-cli webpack打包后加载资源的路径问题

vue项目,访问打包后的项目,输入路径后,页面加载空白.这时会有两类问题,都是路径问题. 1.一个是css,js,ico等文件加载不到,是目录里少了dist 打开页面时一片空白 解决办法: 前端精品教程:百度网盘下载 config/index.js文件的build->assetsPublicPath的默认值改为 './' assetsPublicPath:资源的根目录.这个是通过http服务器运行的url路径.因为webapp和static中间还有层dist,所以要用'./' 2.另一个就是单纯

学习Vue.js之vue移动端框架到底哪家强

官网:https://cn.vuejs.org/ Weex 2016年4月21日,阿里巴巴在Qcon大会上宣布跨平台移动开发工具Weex开放内测邀请. Weex 是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能.可扩展的 native 应用,为了做到这些,Weex 与 Vue 合作,使用 Vue 作为上层框架,并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API,这样一来,你甚至可以使用其他框架驱动 Weex,打造三端一致的 native 应用. Weex能够

关于Vue.js和Vue.js的优缺点以及和与其他前端框架的区别

首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开. View通过Controller来和Model联系,Controller是View和Model的协调者,View和Model不直接联系,基本联系都是单向的. 用户User通过控制器Controller来操作模板Model从而达到视图View的变化. 2.MVP:是从MVC模式演变而来的,都是通