vue2.0+webpack打包路径报错问题和本地运行打包文件

使用vue2.0开发html5完成时，使用npm run build打包文件是路径会出现问题
解决方法：
找到当前项目的config/index.js（大概在46行）按照下面的内容修改

 build: {
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',//在这里将改成 相对路径  assetsPublicPath: './'
    productionSourceMap: true,
    devtool: '#source-map',
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  }

修改完成后使用npm run build打包,完成时命令行会提示


  Build complete.

  Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

***提示打包完成 
   打包的文件需要使用HTTP服务器提供服务
  直接打开index.html文件是以文件的形式打开将不起作用

打包完成后当前的项目内新增了dist的文件夹里面有两个打包好的文件一个是static静态资源文件一个是index文件于是我就在编辑器点击生成的index.html文件在浏览器打开结果出错了
本地资源static所有文件都不能使用包括css,images,js,json...等等，在控制台看到报错404未找到文件

浏览器控制台报错

***其实这也不奇怪，因为上述打包完成时提示说了，当前的文件需要在HTTP服务器下才能跑起来

于是我使用了node的http-server 服务器可以成功的打开了打包的文件没有报错
怎么使用node提供的http-server呢？？？
1下载node并安装
首先安装nodejs上官网，搜索，下载，然后安装，直接下一步，直至完成即可输入cmd打开命令行工具
输入node -v 显示版本代表安装成功输入npm -v 显示版本代表安装成功（npm是node.js自带的无需下载）
2安装http-server
在cmd工具栏输入npm install http-server -g 全局安装http-server 安装一次就行后面使用时可以直接使用
安装完成后，打开你的项目（dist）目录输入hs或者http-server；就可以了

D:\dev\Git\learngit\At-all-Time\dist>hs      //输入命令hs启动本地服务器
Starting up http-server, serving ./
Available on:
  http://192.168.43.222:8080       //在同一个局域网下手机连接访问这地址（说白了，就是说手机电脑连接相同的WIFI都可以访问页面的内容）
  http://127.0.0.1:8080        //这个IP局限于电脑打开
Hit CTRL-C to stop the server

好了纠结了一天的打包文件终于可以跑起来了

最后编辑于：2020.01.04 01:16:14