vue webpack文件打包后的文件如何本地运行

前端小伙伴第一次接触vue的时候会涉及到webpack打包代码文件后本地运行路径不对的问题,博主遇到的是这样的问题不知道与你们的是否一样,如下图


如果遇到这样的问题,那是引文webpack打包的资源文件是根目录的形式,即:‘/’  与  ‘./’的区别(后者是相对路径)

此时百度一下,会有网友说建立本地服务运行代码不就行了    确实啊,博主也很同意这种办法,我就提供大家两个办法:

1,nodeJS建立本地服务


打包后的文件在dist目录,建立sercer.js文件(文件名自定义)

server.js


运行server.js

浏览器打开localhost:8888 你的本地页面就可以运行了

2,http-server方法

命令一:npm install http-server -g 全局

命令二:http-server


默认的是8080端口

通过命令http-server -a 0.0.0.0 -p 8081可以修改端口号

打开提供的三个中的任意链接都可以打开本地打包的页面(只要打开地址会默认寻找index.html)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 10,689评论 4 31
  • 最近在学习 Webpack,网上大多数入门教程都是基于 Webpack 1.x 版本的,我学习 Webpack 的...
    My_Oh_My阅读 12,521评论 40 247
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,755评论 19 139
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 13,850评论 0 21
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 10,844评论 1 32