Vue项目用webpack打包后，预览时资源路径出错（文末有vue项目连接分享）

最近用vue写了一些项目，项目写完以后须要打包以后才能放到网上展现，因此在这里记录一下项目打包的过程以及遇到的一些问题。

 

-------------------------------------------------- 分割线 --------------------------------------------------

 

1、项目打包过程：

1.vue项目写完后，首先在项目路径下的命令行中运行：npm run build，看到Build complete即表示项目打包完成；

 

而后，回到本身的项目文件夹中，会看到新生成了一个dist文件夹，这个dist文件夹就是用来存放webpack给咱们打包后的文件的

 打开dist文件夹，会看到里面有一个static文件夹和一个index.html文件，static文件夹里存放的是webpack为咱们打包后的css文件、js文件以及项目图片等，而index.html则是咱们用vue搭建的项目的主页，然而，在浏览器中打开index.html会发现显示空白！！

 

 

二.资源的路径问题

 上面说到打包后获得的index.html在网页中打开显示空白，咱们能够按F12打开控制台看看究竟发生了什么状况。

打开控制台后，咱们能够发现一些报错信息，显示没法找到文件，这些文件都是webpack给咱们打包好的资源文件，没法找到这些文件的缘由是路径设置问题。

 

找到了问题后，咱们就能够解决问题了。

 

首先，咱们回到项目文件，找到config>index.js文件，打开这个文件，找到build（注意是build不是dev）这个对象下面的assetsPublicPath的值改为 './'

 

保存以后，从新在命令行中npm run build，而后再打开dist文件夹下面的index.html，便可显示成功！！

 

此外，还有另一个方法能够解决这个问题，就是在项目文件夹下找到build>webpack.prod.conf.js，打开该文件夹，找到output对象，而后添加一行代码 publicPath: './'，能够起到一样的效果。

 

 3、项目中背景图片的路径问题

若是你的项目文件中的css代码以相似这样的方式引入背景图片：background-image: url(../assets/main-view/icons/seafood.png)，这时项目打包后，打开index.html文件可能会没法显示该背景图片，这其实也是图片路径的问题，这时你须要在项目文件中找到build>utils.js文件，而后打开该文件，在generateLoaders( )这个函数下面添加一行代码 publicPath: '../../' ，便可解决背景图片没法显示的问题。

 

--------------------------------------------------------分割线-----------------------------------------------------

 

以上就是vue打包项目过程及遇到的一些问题的总结，下面附上最近写的几个vue项目，有兴趣的朋友能够看一下。

a-vue-todolist： 

这个todolist的demo比较简单，只有一个页面，不过基本涵盖了vue入门必须掌握的一些知识点，包括v-if/v-show/v-model/v-on/v-bind等vue经常使用指令，以及props/自定义事件等父子通讯相关知识。

项目地址： https://github.com/Yuan-Yiming/a-vue-todolist

浏览地址：https://yuan-yiming.github.io/a-vue-todolist/dist/

 

a-vue-blog：

这个博客项目也比较简单，由博客列表、阅读博客、添加博客、预览博客等几个页面组成。

项目地址： https://github.com/Yuan-Yiming/a-vue-blog

浏览地址：https://yuan-yiming.github.io/a-vue-blog/dist/#/

 

fresh-everyday（没完成，还在更新中）：

这是一个用vue搭建的电商前端项目，相对比较复杂一些，基本实现一个电商网站的主要页面的功能，不过目前还没写完，还在更新中，有兴趣的朋友也能够也能够看一下。

项目地址：https://github.com/Yuan-Yiming/fresh-everyday

浏览地址：https://yuan-yiming.github.io/fresh-everyday/dist/#/

 

最后说一句，喜欢我项目的朋友欢迎给个人项目打星哦~