Vue -- vue项目从创建到打包（以及打包后会出现的问题）

确保npm已安装

一. 项目创建

1. vue-cli：vue脚手架，提供好基本项目结构

npm install vue-cli -g  //安装vue命令环境

验证是否安装成功，可执行命令：vue –version

2.生成项目模板

vue init <模板名> 本地文件夹名称

本身集成很多项目模板:

        simple                  基本没用

        webpack              适合大型项目；Eslint 检查代码规范；单元测试

       webpack-simple   没有代码检查

这里使用webpack

vue init webpack test1

一路按回车即可

3.进入到生成目录里，安装依赖，并运行项目

cd test
npm install   //如果选择的模版是“webpack”，不需要执行该命令
npm run dev 

 

然后复制里面的http://localhost:8082，用浏览器打开。如下，即代表项目创建成功。

二. vue项目打包

1. 打包

npm run build 

如下代表打包成功。打包后会生成dist文件夹，只需要里面的文件。

三. vue项目打包出现的问题

1. 点击dist/index.html，运行。页面会空白且报错。如图

修改，项目根目录下config/index.js，修改一处，如下图。

之后，删除dist文件夹，重新打包npm run build，就ok了。

2.vue项目打包后css背景图路径不对的问题

解决办法为：只需要在build/utils.js文件中添加如下一行代码即可。
publicPath:'../../'

此外，如果页面出现空白，或者图片找不到，可能是路径的问题。