vue项目开发实战（二）——vue项目打包

上次我们已经成功的建立了一个vue项目，作为项目前端必须打包之后才能和后端对接，虽然我们现在完成的只是一个类似网页的东西，但是也要为之后的工作做准备

项目结构

复习一下之前说的vue项目结构

.
├── dist/                      # 打包生成的文件，开始可能没有
│   └── ...
├── node_modules/               # 一些项目依赖的包
│   └── ...
├── src/
│   ├── main.js                 # 入口文件
│   ├── App.vue                 # vue的入口组件
│   ├── components/             # vue组件的位置
│   │   └── ...
│   └── assets/                 # 一些静态资源
├── index.html                   #入口网页文件
├── webpack.config.js            # webpack打包和开发的一些配置  
├── ...     

理论上只要npm run build就可以打包好了

npm run build

之后将dist文件夹和index.html作为打包好的东西就ok了，但是打开index.html之后发现我们在组件中添加的静态图片都报了路径错误，可能build.js也没有成功加载，整个网页是空的，很难受

修改配置文件

初步判断可能是在webpack.config.js中的路径出了问题，经过一番摸索之后，我把module.exports下的output修改成这样

webpack.config.js
output:{
    path:path.resolve(__diename,'./dist/'),
    publicPath:'./dist/',
    filename:'build.js'
}

现在再进行npm run build应该就可以看到正确的效果了，但是我发现在这样设置之后npm run dev就无法实时更新效果了，目前我还没有找到解决方案，所以在开发过程中就把上边的东西改回去

webpack.config.js
output:{
    path:path.resolve(__diename,'./dist/'),
    publicPath:'/dist/',
    filename:'build.js'
}