文件压缩如何去掉console

在使用vue开发项目的过程中,免不了在调试的时候会写许多console,在控制台进行调试;在开发的时候这种输出是必须的,但是build后线上运行时这个东西是不能出现的;那么我如何配置项目,从而让webpack帮我删除掉console呢?下面我们给出了vue-cli 3.0vue-cli 2.0的配置如下:

vue-cli 3.0

vue.config.js文件中添加如下代码即可

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
...
configureWebpack: {
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_console: true,//console
drop_debugger: false,
pure_funcs: ['console.log']//移除console
}
}
})
]
}
}
...
}

vue-cli 2.0

build/webpack.prod.conf.js文件中进行如下配置即可

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

plugins: [
...
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_console: true,//console
pure_funcs: ['console.log']//移除console
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
...
]

axios解决调用后端接口跨域问题

vue-cli 3.0

在项目根目录新建vue.config.js文件,增加如下配置即可:

module.exports = {
lintOnSave: false, // 是否使用eslint
publicPath: '/',
// 这里开始代理配置
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}

vue-cli 2.0

vue-cli是通过本地代理的方式解决接口跨域问题的。但是在vue-cli 2.0的默认项目配置中这个代理是没有配置的,如果现在项目中使用,必须手动配置config/index.js文件。

...
proxyTable: {
'/api': { //将www.exaple.com印射为/apis
target: 'https://www.example.com, // 接口域名
secure: true, // 如果是https接口,需要配置这个参数
changeOrigin: true, //是否跨域
pathRewrite: { // 如果接口本身没有api的路径,那么这里将发送到后端的请求重写为没有api的路径
'^/api': '/'
}
}
}
...

vue项目的实用配置的更多相关文章

  1. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  2. rem的在vue项目中使用配置,,浏览器的兼容性之Mate标签

    在vue中配置rem 位置:在APP.vue的script中,在export default之外 (()=>{ let winW = document.documentElement.clien ...

  3. vue项目实战, webpack 配置流程记录

    vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json " ...

  4. VSCode中使用vue项目ESlint验证配置

    如果在一个大型项目中会有多个人一起去开发,为了使每个人写的代码格式都保持一致,就需要借助软件去帮我们保存文件的时候,自己格式化代码 解决办法:vscode软件下载一个ESLint,在到设置里面找到se ...

  5. vue项目eslint环境配置与vscode配置eslint

    eslint基础环境搭建 全局安装eslint:npm install eslint -g 项目eslint初始化:eslint --init,按团队或自己的编程风格回答三道题. ? How woul ...

  6. vue项目的路由配置

    方案一.在生成项目的时候就选择安装路由; 这个地方选择y即可; 生成项目之后在src目录下会有router文件夹,里面有index.js,并且里面已经存在一个helloWorld页面了,可以直接模仿着 ...

  7. Vue 项目中 ESlint 配置

    前言 对于 ESlint 这一块一直存在一些疑问,今天看到一个文章内容挺好的,这里拿来了. 一.eslint 安装 1.全局安装 npm i -g eslint 全局安装的好处是,在任何项目我们都可以 ...

  8. vue项目打包文件配置(vue-clli3)

    练手项目完结打包的时候遇到一些问题,特此记录 先贴我的vue.config.js文件的代码(vue-cli3构建的项目默认是没有此文件的,需手动添加)更多详细配置参考官方配置文档,我的项目不大不小,这 ...

  9. vue项目的常用配置代码

    { // 针对vue的格式化配置----依赖eslint.prettier.vetur等插件 // 强制单引号 "prettier.singleQuote": true, &quo ...

随机推荐

  1. Java ArrayList使用技巧 - 两个ArrayList去除重复的元素

    方法一.ArrayList中提供的removeAll方法(效率最低) List1.removeAll(mSubList); 方法二.双重循环(比方法一效率高) 双重循环分为内外两层循环,经过测试,将元 ...

  2. JS中 reduce() 的用法

    过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce ...

  3. Delphi 2010 中的泛型

    Delphi 2010 中的泛型 2010已发布很长时间了,口碑还不错,准备用它开发下一项目,但对泛型等新东西的认识还不够,就搜了一下,发现下面这篇文章,还不错,大家一起补补课吧! C++中的模板.C ...

  4. 剑指offer——29顺时针打印矩阵

    题目描述 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下4 X 4矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数 ...

  5. 剑指offer——08斐波那契数列

    题目描述 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0). n<=39 有多种方法,简单的循环.递归.动态规划: class Solutio ...

  6. jquery操作html元素之( 获得内容和属性)

    * jQuery - 获得内容和属性 jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变 ...

  7. POJ 1265 /// 皮克定理+多边形边上整点数+多边形面积

    题目大意: 默认从零点开始 给定n次x y上的移动距离 组成一个n边形(可能为凹多边形) 输出其 内部整点数 边上整点数 面积 皮克定理 多边形面积s = 其内部整点in + 其边上整点li / 2 ...

  8. SPRING+JPA+Hibernate配置方法

    1.applicationContext.xml <?xml version="1.0" encoding="UTF-8"?> <beans ...

  9. PHP算法之Z 字形变换

    将一个给定字符串根据给定的行数,以从上往下.从左到右进行 Z 字形排列. 比如输入字符串为 "LEETCODEISHIRING" 行数为 3 时,排列如下: L C I RE T ...

  10. js 高级 原型与原型链

    * 所有函数都有一个特别的属性: * `prototype` : 显式原型属性* 所有实例对象都有一个特别的属性: * `__proto__` : 隐式原型属性 1.  每个函数都有一个prototy ...