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

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

作者: 简约酒馆 | 来源:发表于2020-01-04 01:01 被阅读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
    
    

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

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/nvztactx.html