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

2020-01-04  本文已影响0人  简约酒馆

使用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

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

上一篇下一篇

猜你喜欢

热点阅读