vue项目打包踩坑记

基于webpack+vue-cli下的vue项目打包命令是 npm run build ,等待打包完成后在根目录生成dist文件夹，里面包含了全部项目相关的内容。

注意：须要完整版的vue-cli项目，即经过vue init webpack初始化的项目才能够，经过vue init webpack-simple初始化的项目没有打包文件，没法打包。目录结构以下

---

vue init webpack初始化的目录结构，打包依赖build和config文件夹的配置，static存放静态文件

vue init webpack-simple初始化的目录结构缺乏build、config、static文件夹，通常用于新手上路

 

在打包过程当中遇到了几个问题，但愿能给一样是打包新手的同窗一些帮助。

一、打包完成后能够本地测试结果，直接在文件夹中双击打开或者编辑工具右键浏览器打开便可。 

 

二、打开网站后一片空白，由于是本地，路径不对，须要在打包前配置

config/index.js 中，有dev和build两个参数，将build参数下的assetsPublicPath的值又 '/' 修改成 './' 。从新打包，而后刷新页面便可。

 

 三、打开项目后若是网站的css中背景图片或者图标没有加载出来， 须要配置引用路径

build/utils.js中，ctrl+f搜索 ExtractTextPlugin.extract 。

 四、若是进行了第三3个操做，而且经过相对路径引用了和src目录同级的static静态目录的文件，这时候打包也会找不到static目录的文件，须要把引用的相对路径修改成绝对路径。

好比： 

修改前是 ../../static/ueditor  ，修改后 @/../static/ueditor 。