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.jsoutput:{    path:path.resolve(__diename,'./dist/'),    publicPath:'./dist/',    filename:'build.js'}

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

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