目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端口上进行本地调试。项目已经进行一半了,今天有时间突然想使用npm run build进行上线打包,试试能否成功看到我的项目效果。一开始是毫无头绪,什么都不懂,直接是就在命令行上敲下:npm run build命令。

好开心啊,竟然没有报错。以为就这么简单的成功了,在浏览器上输入:http://localhost/MGT/learnVuex/dist/index.html,一片空白。果然没有那么顺利。打开控制,看到Console下出现了很多错误。

错误看不懂,(捂脸)只好百度了。

我们一开始运行npm run build 命令时,有这么一段提示:

这段话的意思就是说:构建文件务必放在一个HTTP服务器。直接打开index.html文件将不工作。

看到提示还是要好好看的,这毛病要改呀!

那么问题来了,怎么解决呢?

我们知道打包的命令文件是config/build.js

到项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”,改为“./”即可,就在前面加个点就可以了,

现在再重新打包一次 npm run build,刷新你的页面,就可以看到啦

在这之前有一个前提条件,那就是电脑上要安装服务器。只要你的服务器上有支持http或者https的服务器软件就可以,我知道的有nginx和apache两种,只要安装了两个中的一个,并且配合好访问路径,把你生成的文件放到服务器下或者映射路径下,启动你的服务器软件即可,然后就可以使用你配置的路径访问项目。

我在浏览器上直接是输入localhost,打开文件目录的,http://localhost/MGT/learnVuex/dist/index.html,这么文件到底是在哪个盘下面呢?

我在电脑上上安装了一个XAMPP,并把apache的映射路径设置为:E:/project,而我的项目文件就放在E:/project目录下面 这就是我的:E:\project\MGT\learnVuex\dist。

所以在浏览器上输入:localhost,就是打开E:/project,就可以看到这目录下的所以项目文件啦。

原文链接:https://www.cnblogs.com/qiu-Ann/p/7477593.html

npm run build 打包后,如何运行在本地查看效果的更多相关文章

  1. npm run build 打包后,如何运行在本地查看效果(Nginx服务)

    这段时间,研究了一下vue 打包的很慢的问题.但是当我 npm run build 打包后,在本地查看效果的时候,活生生被我老大鄙视了,因为我打开了XAMPP.他说:你怎么不用Nginx啊?用这个一堆 ...

  2. 关于npm run build打包后css样式中的图片失效的问题(如background)

    平时run dev都能正常显示的css背景图片在npm run build打包后竟然不显示了(写在标签对中的图片都可以正常显示),而且dist/static/img目录下是确实有这张图片的,于是查看打 ...

  3. npm run build打包后自定义动画没有执行

    问题描述:在vue项目中,当你自己写了一些自定义动画效果,然后你npm run build打包项目放到线上环境后,发现动画并没有效果. 解决办法:在vue项目中找到build文件夹下的vue-load ...

  4. npm run build 打包后(直接打包白屏),如何运行在本地查看效果(Apache服务)

    转载: https://www.cnblogs.com/qiu-Ann/p/7477593.html 目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端 ...

  5. npm run build 打包后,如何运行在本地查看效果(Apache服务)

    目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端口上进行本地调试.项目已经进行一半了,今天有时间突然想使用npm run build进行上线打包,试试 ...

  6. npm run build 打包后,如何查看效果

    我们用vue-cli搭建的项目执行npm build后本地打开页面空白,如果才能查看npm run build之后的结果呢 首先我们看一下提示 Tip: built files are meant t ...

  7. npm run build 打包后空白页解决问题两种情况

    问题一:assetsPublicPath配置错误 解决办法:打开config/index.js文件 build:{        // assetsPublicPath: '/'        ass ...

  8. Vue打包npm run build 打包后空白怎么解决?

    问题一:路径报错并且页面空白 解决:buld/index.js      assetsPublicPath: '/'修改为 assetsPublicPath: './' 问题二:没报错页面空白  ro ...

  9. Vue -- vue-cli(vue脚手架) npm run build打包优化

    这段时间公司新项目立项,开发组选用 Vue2.0 进行开发.当然也就一并用到 vue cli 进行自动化构建.结果在基础版本开发完成后,用 npm run build 命令打包上线时,发现以下几个问题 ...

随机推荐

  1. 使用CocoaPods被卡住:Updating local specs repositories

    使用cocoapods 更新第三库,一直停留在.Updating local specs repositories 后来查发现pod install  被墙了,请大家换成pod install --v ...

  2. 【软件分析与挖掘】Vision of Software Clone Management: Past, Present, and Future (Keynote Paper)

    abstract: 代码克隆的综述 S1    INTRODUCTION AND MOTIVATION 代码克隆的利弊: 利:可以有效地去耦合,避免其他一些可能的错误: 弊:当被复制的那段code中带 ...

  3. javascript === 与 ==

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Java文件合并

    文件分割与合并是一个常见需求,比如:上传大文件时,可以先分割成小块,传到服务器后,再进行合并.很多高大上的分布式文件系统(比如:google的GFS.taobao的TFS)里,也是按block为单位, ...

  5. C# WinForm实现控件拖动实例介绍

    主要是设计控件的MouseDown.MouseLeave.MouseMove事件.一步步来吧:1.定义一个枚举类型,描述光标状态 private enum EnumMousePointPosition ...

  6. NYOJ 14 贪心解题报告

    会场安排问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 学校的小礼堂每天都会有许多活动,有时间这些活动的计划时间会发生冲突,需要选择出一些活动进行举办.小刘的工 ...

  7. angularJS怎么实现与服务端的PHP进行数据交互

    //{params: 要传的参数obj },params这个是关键字不能换别的变量 $http.get(url, {params: {id: categoryid, key: keys} }).suc ...

  8. Makefile中export分析

    在分析内核启动过程的./arch/arm/Makefile文件里碰到了这样字段 162 export TEXT_OFFSET GZFLAGS MMUEXT 然后在子目录arch/arm/kernel/ ...

  9. CMake Error at cuda_compile_generated_warp.cu.o.cmake:264 (message)

    今天,我来给大家分享一下opencv安装时报的错.然后讲错是怎么解决的. 为啥老是写一些环境搭建的博客?因为环境搭建琐碎而繁杂,希望写下来,帮助大家.让大家少走弯路. 专注主业,专注算法的实现和优化. ...

  10. 学习 HTML+CSS 的书籍推荐

    1.<CSS那些事儿> 本书专注于CSS技巧实例的讲解,由浅入深地分析了CSS样式在布局时所需要理解的原理.绕开随处可见的基础知识.网络中能随意搜索到的hack技巧,侧重原理分析,拓展读者 ...