前端小伙伴第一次接触vue的时候会涉及到webpack打包代码文件后本地运行路径不对的问题,博主遇到的是这样的问题不知道与你们的是否一样,如下图
![](http://upload-images.jianshu.io/upload_images/10780477-90ccec2b2a435910.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
如果遇到这样的问题,那是引文webpack打包的资源文件是根目录的形式,即:‘/’ 与 ‘./’的区别(后者是相对路径)
此时百度一下,会有网友说建立本地服务运行代码不就行了 确实啊,博主也很同意这种办法,我就提供大家两个办法:
1,nodeJS建立本地服务
![](http://upload-images.jianshu.io/upload_images/10780477-a7b4c90cf9ada5d7.png?imageMogr2/auto-orient/strip|imageView2/2/w/767/format/webp)
打包后的文件在dist目录,建立sercer.js文件(文件名自定义)
server.js
![](http://upload-images.jianshu.io/upload_images/10780477-929bebc7bb222c9c.png?imageMogr2/auto-orient/strip|imageView2/2/w/917/format/webp)
运行server.js
![](http://upload-images.jianshu.io/upload_images/10780477-24abb0b2a4b27588.png?imageMogr2/auto-orient/strip|imageView2/2/w/667/format/webp)
浏览器打开localhost:8888 你的本地页面就可以运行了
2,http-server方法
命令一:npm install http-server -g 全局
命令二:http-server
![](http://upload-images.jianshu.io/upload_images/10780477-7ab8f290c3183ac2.png?imageMogr2/auto-orient/strip|imageView2/2/w/744/format/webp)
默认的是8080端口
通过命令http-server -a 0.0.0.0 -p 8081可以修改端口号
打开提供的三个中的任意链接都可以打开本地打包的页面(只要打开地址会默认寻找index.html)