vue探路合集

vue探路合集。

css分离

css-code-split

webpack打包环境优化的一个点：将css样式代码抽离出来。若不抽离，可以在bundle.js中发现css代码被转化成节点样式插入到了body下；这个过程是：style-loader将外部css文件注入到html中，css内容使用css-loader进行解析，转化成js文件；因为webpack只能识别js文件。
css分离：
使用extract-text-webpack-plugin插件，该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。
优点:
非js文件单独打包，通过js将文件写入，可以用来单独做浏览器缓存。
目前工程中大部分用到的还是webpack3+；实际中，在不指定版本的情况下，npm默认安装的4.0.0版本，这时使用上述插件会报错：

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

原因：
extract-text-webpack-plugin还不能支持webpack4.0.0以上的版本。
解决办法：

npm install extract-text-webpack-plugin@next

会下载到+ extract-text-webpack-plugin@4.0.0-beta.0
然后在打包就正常了

vue-loader

vue-loader

解决方案:

const VueLoaderPlugin = require('vue-loader/lib/plugin');

plugins: [
    new VueLoaderPlugin()
]

1、假设你美滋滋install一个vue项目

npm install -g vue-cli
vue init webpack yourproject
...

这些都木有问题，接下来到npm install的时候，突然biu出来几个大写红色的ERR！，like this

大写红色的ERR！

那么这下或许懵逼了，可能你以为直接跑项目无视掉就好，然后就

npm run dev

这下更厉害了，满屏幕大写红色的ERR！
要是可视化还好，一堆字母在这看着确实不舒服。

解决方案

1、跑一下这个

npm cache clean --force

2、或者跑一下这个

npm install -g cnpm --registry=https://registry.npm.taobao.org

项目就好好跑起来了

2、vue项目打包之后出现map文件，也就是.m

vue项目打包之后的dist目录中存在很多map文件，包括打包好的项目文件。

map文件：打包后的代码经过压缩加密，如果运行报错，输出的错误信息无法准确得知是哪里的代码报错。

有了map可以像未加密的代码一样，准确的输出是哪一行哪一列。

去掉map的方法

src->config->index.js中修改

productionSourceMap:false

改完打包就不会出现map文件了，也可以在打包之后将map文件干掉（linux下）

find . -name "*.png" | xargs rm -rf

3、vue打包之后报错，或者每次install报错（React中也存在）

就像这样

产生原因

fsevents是mac osx系统的，在windows下使用了所以会有问题，或者fsevents不在package.json里，但是仍然安装了，是因为你的系统不是Windows系统，fsevents是苹果系统的可选依赖,团队的其他人在他的mac上安装了fsevents相关依赖库，所以你这里也就安装上了。

解决方案

1、如果是warning错误: 这个fsevents是mac下用的，windows检查你的package.json文件中是不是有fsevents相关依赖，删除即好，或者忽略掉，意思就是你已经安装成功了。
2、如果是error错误:

npm update 
npm install

如果无法解决，请尝试升级node版本

4、vue使用了ES6的promise，IE不支持

使用babel-polyfill转换

npm install babel-polyfill --save

然后在webpack.config.js中引入该模块

require('babel-polyfill')
entry:{
	app:['babel-polyfill','./src/main.js']
}