vue项目的实用配置
文件压缩如何去掉console
在使用vue
开发项目的过程中,免不了在调试的时候会写许多console
,在控制台进行调试;在开发的时候这种输出是必须的,但是build
后线上运行时这个东西是不能出现的;那么我如何配置项目,从而让webpack
帮我删除掉console
呢?下面我们给出了vue-cli 3.0
和vue-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项目的实用配置的更多相关文章
- vue 项目中实用的小技巧
# 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...
- rem的在vue项目中使用配置,,浏览器的兼容性之Mate标签
在vue中配置rem 位置:在APP.vue的script中,在export default之外 (()=>{ let winW = document.documentElement.clien ...
- vue项目实战, webpack 配置流程记录
vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json " ...
- VSCode中使用vue项目ESlint验证配置
如果在一个大型项目中会有多个人一起去开发,为了使每个人写的代码格式都保持一致,就需要借助软件去帮我们保存文件的时候,自己格式化代码 解决办法:vscode软件下载一个ESLint,在到设置里面找到se ...
- vue项目eslint环境配置与vscode配置eslint
eslint基础环境搭建 全局安装eslint:npm install eslint -g 项目eslint初始化:eslint --init,按团队或自己的编程风格回答三道题. ? How woul ...
- vue项目的路由配置
方案一.在生成项目的时候就选择安装路由; 这个地方选择y即可; 生成项目之后在src目录下会有router文件夹,里面有index.js,并且里面已经存在一个helloWorld页面了,可以直接模仿着 ...
- Vue 项目中 ESlint 配置
前言 对于 ESlint 这一块一直存在一些疑问,今天看到一个文章内容挺好的,这里拿来了. 一.eslint 安装 1.全局安装 npm i -g eslint 全局安装的好处是,在任何项目我们都可以 ...
- vue项目打包文件配置(vue-clli3)
练手项目完结打包的时候遇到一些问题,特此记录 先贴我的vue.config.js文件的代码(vue-cli3构建的项目默认是没有此文件的,需手动添加)更多详细配置参考官方配置文档,我的项目不大不小,这 ...
- vue项目的常用配置代码
{ // 针对vue的格式化配置----依赖eslint.prettier.vetur等插件 // 强制单引号 "prettier.singleQuote": true, &quo ...
随机推荐
- Java ArrayList使用技巧 - 两个ArrayList去除重复的元素
方法一.ArrayList中提供的removeAll方法(效率最低) List1.removeAll(mSubList); 方法二.双重循环(比方法一效率高) 双重循环分为内外两层循环,经过测试,将元 ...
- JS中 reduce() 的用法
过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce ...
- Delphi 2010 中的泛型
Delphi 2010 中的泛型 2010已发布很长时间了,口碑还不错,准备用它开发下一项目,但对泛型等新东西的认识还不够,就搜了一下,发现下面这篇文章,还不错,大家一起补补课吧! C++中的模板.C ...
- 剑指offer——29顺时针打印矩阵
题目描述 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下4 X 4矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数 ...
- 剑指offer——08斐波那契数列
题目描述 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0). n<=39 有多种方法,简单的循环.递归.动态规划: class Solutio ...
- jquery操作html元素之( 获得内容和属性)
* jQuery - 获得内容和属性 jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变 ...
- POJ 1265 /// 皮克定理+多边形边上整点数+多边形面积
题目大意: 默认从零点开始 给定n次x y上的移动距离 组成一个n边形(可能为凹多边形) 输出其 内部整点数 边上整点数 面积 皮克定理 多边形面积s = 其内部整点in + 其边上整点li / 2 ...
- SPRING+JPA+Hibernate配置方法
1.applicationContext.xml <?xml version="1.0" encoding="UTF-8"?> <beans ...
- PHP算法之Z 字形变换
将一个给定字符串根据给定的行数,以从上往下.从左到右进行 Z 字形排列. 比如输入字符串为 "LEETCODEISHIRING" 行数为 3 时,排列如下: L C I RE T ...
- js 高级 原型与原型链
* 所有函数都有一个特别的属性: * `prototype` : 显式原型属性* 所有实例对象都有一个特别的属性: * `__proto__` : 隐式原型属性 1. 每个函数都有一个prototy ...