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'
}

你可能感兴趣的:(作业博客)