vue-cli构建项目 npm run build后应该怎么运行在本地查看效果

问题来啦

运行npm run dev以开发模式打开调试好了你的案例程序;你还不满足于仅仅把代码放在github上,想直接能把案例效果build版本的代码在本地预览或者放在你的个人博客上供大家直接看效果学习。

这时如果直接运行npn run build是可以运行并打包你的代码的,不会报任何异常或错误,但是你会看到你的命令行打包完成有这样一句提示:

估计看到这里你是不是第一感觉说:不是警告色,说明应该没啥问题吧,(也许是英语不过关也许是懒得不想看反正是没看这段提示是什么意思)抱着试试看的侥幸心理,默默用浏览器打开了你刚build生成的dist目录下的index.html文件!

然而,你惊奇地发现网页一片空白,丝毫没有一点点痕迹。。。

接下来,你默默的打开了控制台,看到console tab下一片404的各种找不到资源;如下图:

为什么会这样呢?还得从第一幅图的build后的提示说起,提示的中文翻译是【提示:构建文件务必放在一个HTTP服务器。直接打开index.html文件将不工作】

所以你看到控制台里的一堆404

解决方案

仔细看一下路径,绝对路径,F盘下哪有static文件夹,那就要将打包的路径改为相对路径。这个根据build命令一路跟踪,到项目目录下的config文件夹里的index.js文件中的build对象,将assetsPublicPath中的“/”,改为“./”即可,就在前面加个点就可以了,并在build\build.js将这两句的提示信息删掉或注释掉,再打包直接用浏览器直接运行就好了。

现在再重新打包一次 npm run build,刷新你的页面或者还去你的dist目录下直接用浏览器打开里面的index.html文件即可看到资源都找到了!

欢迎加入我的前端群,大家一起讨论Vue相关前端话题,前端老司机群:3851 8473

福利赠送

我做的vue 2.0系列QQ音乐单页面应用程序,文章截图是早期版本,目前效果比较完善了,建议clone到本地查看效果或查看在线效果。

预览地址(切换到手机浏览器模式查看): 点这里

github地址:https://github.com/chengjun2014/qq_music

时间: 2024-11-05 13:29:36

vue-cli构建项目 npm run build后应该怎么运行在本地查看效果的相关文章

npm run build 打包后,如何运行在本地查看效果

目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端口上进行本地调试.项目已经进行一半了,今天有时间突然想使用npm run build进行上线打包,试试能否成功看到我的项目效果.一开始是毫无头绪,什么都不懂,直接是就在命令行上敲下:npm run build命令. 好开心啊,竟然没有报错.以为就这么简单的成功了,在浏览器上输入:http://localhost/MGT/learnVuex/dist/index.html,一片空白.果然没有那么顺利.

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

这段时间,有点时间,研究了一下vue 打包的很慢的问题.但是当我 npm run build 打包后,在本地查看效果的时候,活生生被我老大鄙视了,因为我打开了XAMPP.他说:你怎么不用Nginx啊?用这个一堆的路径问题!!!!!! 然后我就去研究了Nginx ...我原谅我老大了. 一.初识nginx Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.其特点是占有内存少,并发能力强,事实上nginx的并发能力

在vue项目npm run build后,index.html中引入css和js 报MIME type问题

问题: 1.在vue项目中,build打包后,index页面打开会报错, MIME type ('text/html') ;报错内容:because its MIME type ('text/html') is not a supported stylesheet MIME type2.控制台报错:报错内容:http://127.0.0.1:5500/static/css/app.04f46711e76646577281177c721d6432.css 这个地址Cannot GET 解决思路:

vue-cli 项目中绝对路径引用的相关资源 npm run build 后 打开页面报404错误

在项目中.通过vue-cli 搭建的项目,npm run dev时,以绝对路径引用的相关资源在npm run build 后,页面打开报相关资源404错误: 解决方法如下: 打开build/utils.js,在图中相应位置加入红框内容,其中值可能会有不同,若不同,自己配置成相应的即可. 原文地址:https://www.cnblogs.com/xzma/p/9162584.html

Vue - 如何使用npm run build后的dist文件夹

脚手架vue cli生成项目后,使用 npm run build 生成了一个dist文件夹(应该是distribution的缩写) 只要放在http服务器上就可以运行. 使用一句python命令可以搭建http服务器 python -m http.server --directory . 原文地址:https://www.cnblogs.com/allen2333/p/10257640.html

VUE学习笔记之vue cli 构建项目

一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如下图,如果出现相应的版本号,则说明安装成功 因为在官网下载安装node.js后,就已经自带npm(包管理工具)了,要意的是npm的版本最好是3.x.x以上,以免对后续产生影响. 2.安装淘宝镜像 npm install -g cnpm --registry= https://regis

vue项目 npm run dev在Linux 持久运行

touch run.dev.logchmod u+w run.dev.log 记录日志文件 nohup npm run dev > run.dev.log 2>run.dev.log & exit 一定要控制台执行exit 不记录日志 nohup npm run dev >/dev/null 2>&1 & exit 结束持久npm run dev 查看端口号8080 杀死进程 kill -9 9071 原文地址:https://www.cnblogs.com

VUE-CLI Vue安装及开发,npm run build无法查看项目的问题

Vue-cli 本地安装vue项目 需要安装node.js,用node命令行npm的方式安装Vue 步骤: 1.进入项目地址安装 npm install vue-cli -g 2.初始化一下 ESlink e2e等是测试工具,经常会报一些vue语法等错误,有时会比较麻烦,可以关闭 3.再安装依赖 npm install npm安装建议挂VPN,不然很慢而且容易出错,不能挂VPN的话可以用cnpm的方式安装国内镜像 4.安装成功直接打开了首页 5.运行 npm run dev 6.项目编译 npm

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

问题描述:在vue项目中,当你自己写了一些自定义动画效果,然后你npm run build打包项目放到线上环境后,发现动画并没有效果. 解决办法:在vue项目中找到build文件夹下的vue-loader.conf.js,将extract字段的值改为false,再打包上线,就ok了! 原文地址:https://www.cnblogs.com/duanyue/p/9353903.html