vue-cli build打包后CSS浏览器兼容前缀自动去除的问题

今天做练手项目部署的时候碰到了个奇怪问题,开发环境里显示得好好的CSS prefixer样式,到production环境就消失了。
我开发环境用的是 scss ,刚开始我还以为是 scss 处理器的问题,后来研究了下 build 脚本,发现人家把CSS统一用一个插件给压缩了,然后追查之下发现这个插件用了 postCSSautoprefixer 插件。
这下问题就清楚了,因为 autoprefixer 插件会针对支持的浏览器进行CSS 前缀的删除和追加。

比如:

1
2
3
4
a {
-webkit-border-radius: 5px;
border-radius: 5px;
}

编译成:

1
2
3
a {
border-radius: 5px;
}

autoprefixer 使用了 browserslist 作为依赖。在项目目录中运行:

1
npx browserslist

可以查看当前项目支持的浏览器列表,这时候只要修改当前项目支持的浏览器就可以了。
vue-cli生成的项目默认支持部分移动端浏览器和最新版本的PC端浏览器。

package.json 中修改 browserslist

1
2
3
4
5
6
7
8
"browserslist": [
"> 1%",
"last 2 versions",
"last 10 Chrome versions",
"last 5 Firefox versions",
"Safari >= 6",
"ie > 8"
]

之后再运行 npm run build 这时生成的代码就有 css prefix 了。

在vuejs项目中使用vue-meta管理HTML head信息

用于管理 Vue 2.0 中页面 meta 信息,支持SSR(服务器端渲染)

vue-meta的官方文档在这里
文档中比较详细地说明了在浏览器端和服务器端如何使用 vue-meta 修改页面头部信息,这里我主要介绍下在SPA项目中管理meta info的使用方法。

Step1. 安装:

1
$ npm install vue-meta --save

node操作mysql数据库学习

突然想研究研究怎么用nodejs操作数据库,目前自己机器上刚好装了mysql,这个数据库我也比较熟悉,所以就找了些网上的教程跟着学习一下怎么操作。

首先在项目目录里需要安装 node-mysql 模块:

1
npm install mysql

在mysql里创建一个测试数据库 node_test,然后建个测试用的数据表 mytable

1
2
3
4
5
6
CREATE TABLE `node_test`.`mytable` ( 
`id` INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`firstname` VARCHAR( 20 ) NOT NULL ,
`lastname` VARCHAR( 20 ) NOT NULL ,
`message` TEXT NOT NULL
) ENGINE = MYISAM ;

angular2开发及typescript编译时总是报错 Cannot find name 'require'.

用angular2开发项目时运行 ng serve ,控制台里一直有error报错:

1
2
Error in bail mode: [default] /Users/Virola/code/sites/ng2-app/src/app/app.component.ts:5:14 
Cannot find name 'require'.

虽然一直不知道什么原因,但是因为并不影响开发环境的项目效果所以一直没有理会。

但是到了项目发布的时候,运行 ng build ,这时候就不行了,因为会出现上面这个错误,一直无法部署编译成功。

去网上搜了一下相关帖子,发现实际上是 typescript 编译出的问题。

react or angular ?

这两天花了很长时间分别初步研究了这两个框架,我是本着一颗想做mobile web小需求的心去学习这两个我几乎完全没有接触过的框架的,毕竟前端对我来说有太多知识需要更新了。

ES6初学者

流水账一篇

当家庭主妇的日子只要一接触到互联网方面的信息,马上就会变得无比焦虑,也许这个行业真的有一种摧毁人的魔力,总在源源不绝给人提供孜孜不倦的工作动力。

centos 7 虚拟机安装记录

前言

这几天也是蛋疼了,觉得机器上的windows系统太卡太慢,然后又十分想念mac上的命令行操作,一心想再弄个linux系统来写码练手。以前装过ubuntu虚拟机,印象中配置上似乎十分复杂,以至于后来一直不愿意再装一次,正好之前下载过centos 7.0的安装镜像,然后我的vps主机也是centos系统,觉得装同样的系统应该比较有亲切感。好在最近项目上比较轻松,马上放清明假的节奏大家都不太想排项目(>_<),于是在各种利好的促使下,我又开始了一次我的折腾之旅。

虚拟机安装

vmare player安装过程我就不细说了,基本傻瓜式,比较给力的是我选的iso镜像装好之后自动就是gnome图形界面,之前见到过安装完成之后只有命令行界面的情况,我这个估计镜像版本不太一样。

研究了半天终于搞清楚centos平台的可安装软件是 .rpm 后缀的,而不是 .deb 后缀的,基本上去网站上下载软件的时候都会提供这两个文件版本,选择正确的后缀名下载就好。

关于镜像的问题

受以前安装ubuntu的龟速软件下载的经验影响,我以为这个centos为了提速也一样会需要修改国内镜像之类的,还去改了网易的镜像地址。
结果好像镜像地址过期,搞的yum下载不了东东,只好改回原镜像。万万没想到,系统切换完语言重启之后,自动选择了国内的镜像地址(sina的),下载速度刚刚的。

关于虚拟机卡、慢、假死问题

觉得奇怪,给虚拟机分配了50G硬盘2G内存2个处理器,结果还是开几个程序就卡死,尤其是在安装程序的时候死得更频繁。
后来假死的时候切换出来调win的任务管理器发现,原来是硬盘I/O的处理速度跟不上。
vmware卡死的时候硬盘读写占用一直都是100%,遇到过几次这种情况,每次只能等啊等等到磁盘使用率过一段时间降下来之后,就能切换进虚拟机go on了。

青海

2014年最值得的事情之一,就是一个人也坚持走完了中国大西北。