npm run build 打包后,如何运行在本地查看效果
目前,使用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,就可以看到这目录下的所以项目文件啦。
npm run build 打包后,如何运行在本地查看效果相关推荐
- vue-cli脚手架npm run build打包后图片路径问题 2018.11.21
2018/11/21 最近在自己尝试做一个vue的项目,发现了一个打包以后出现的路径问题 使用npm run dev 可以正常打开项目,图片路径不会出错,使用脚手架npm run build 打包以后 ...
- vue2.0项目部署到服务器_vue项目运行npm run build打包后如何发布到服务器?
运行npm run build后,怎么发布到服务器? 这样就打包成功了.然后我的项目根目录就会多一个dist文件夹,里面包含static文件夹(存放img.css.js等文件)和index.html. ...
- npm run build 打包后页面无法显示问题
今早运维小哥哥跑来找我,想给我的新项目发个版,我还是按照一般流程npm run build 然后git提交,打个tag v1.0.1,运维小哥哥说你前端页面没写好嘛? emmmm-.老娘早就写好了.肯 ...
- 解决:vue项目npm run build 打包后 :src路径里面的本地图片找不到。
问题描述及错误代码: // 本地运行.打包 图片是ok的 <img src="../../static/images/orderSeeProgress0.png"> / ...
- vue项目使用 npm run build 打包后出现样式错乱问题解决方法
检查组件内的 标签是不是没有加scoped 不加scoped打包后容易引起样式错乱 正确规范应该这样 scoped 作用style样式只在本组件内有效,防止别组件类名 或标签一样样式冲突.
- npm run build 打包报错primordials is not defined的解决方法
npm run build 打包报错primordials is not defined的解决方法 D:\uniapp项目\huishua_web_agent>npm run build> ...
- npm run build 打包爬坑记(1)
npm run build 打包爬坑记 先说说打包过程,npm run build 后放入phpstudy里面,访问本地ip,查看phpstudy的端口号,就能访问页面了(访问地址:http://19 ...
- vue项目执行npm run build 打包出现某些图片,字体,资源文件路径404,无法加载的问题
如图所示: 如果出现如图的错误.首先我们第一步是考虑进入dist文件夹里面的static文件夹 正常情况下static文件夹是非常干净的 如果你发现你的static文件夹出现了多余的img.fonts ...
- yarn build 和 npm run build打包有什么区别
yarn build 和 npm run build打包有什么区别 结论: 没区别,yarn build === yarn run build === npm run build
最新文章
- 图灵访谈 | 微盟技术专家戴頔:永远行走在路上
- 输出 1-100 内的所有奇数
- ZOJ3715 竞选班长求最小花费
- HDU - 1827 Summer Holiday (强连通)
- 2021年8月Web服务器排行榜:Nginx牛市上升
- 知识付费小程序源码支持流量主-瀑布流
- Spring@Import注解的三种用法
- 【66份】SaaS资料合集
- 天外键盘映射工具(适合魔兽真三改键)
- 关于码元、波特率和比特率
- openCv 图像顺时针 逆时针旋转
- 这个拥有中国血统的黑客,曾将美国搅得天翻地覆
- 0基础怎么学习SEO?
- Node.js 给前端带来了什么?
- 刮刮奖效果的简单实现
- 便签记事内容怎么放到手机桌面上?
- Pikachu靶场之文件包含漏洞详解
- springboot+jsp高校四六级英语报名系统
- 介绍理想工作计算机 英语作文,理想工作的英语作文6篇
- oracle常用的视图和操作
热门文章
- WRTnode2r DTS 入门
- 11、【易混淆概念集】-第六章2 紧前关系绘图法 排列活动 敏捷发布规划 组织程序链接 依附性活动 提前量与滞后量
- HTML5 图片标签 img
- USACO刷题记录:2020铜组第二题Daisy Chains
- pytorch优化器: optim.SGD optimizer.zero_grad()
- 真香!看了才知道Linux 原来是这么管理内存的
- 中国民主同盟顺德区委员会莅临红谷滩区·高通中国·影创联合创新中心调研
- ct扫描方式有哪些_工业CT的原理及优势
- FastDFS 分布式文件系统详解
- 常用awk命令(转)