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,就可以看到这目录下的所以项目文件啦。
原文链接:https://www.cnblogs.com/qiu-Ann/p/7477593.html
npm run build 打包后,如何运行在本地查看效果的更多相关文章
- npm run build 打包后,如何运行在本地查看效果(Nginx服务)
这段时间,研究了一下vue 打包的很慢的问题.但是当我 npm run build 打包后,在本地查看效果的时候,活生生被我老大鄙视了,因为我打开了XAMPP.他说:你怎么不用Nginx啊?用这个一堆 ...
- 关于npm run build打包后css样式中的图片失效的问题(如background)
平时run dev都能正常显示的css背景图片在npm run build打包后竟然不显示了(写在标签对中的图片都可以正常显示),而且dist/static/img目录下是确实有这张图片的,于是查看打 ...
- npm run build打包后自定义动画没有执行
问题描述:在vue项目中,当你自己写了一些自定义动画效果,然后你npm run build打包项目放到线上环境后,发现动画并没有效果. 解决办法:在vue项目中找到build文件夹下的vue-load ...
- npm run build 打包后(直接打包白屏),如何运行在本地查看效果(Apache服务)
转载: https://www.cnblogs.com/qiu-Ann/p/7477593.html 目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端 ...
- npm run build 打包后,如何运行在本地查看效果(Apache服务)
目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端口上进行本地调试.项目已经进行一半了,今天有时间突然想使用npm run build进行上线打包,试试 ...
- npm run build 打包后,如何查看效果
我们用vue-cli搭建的项目执行npm build后本地打开页面空白,如果才能查看npm run build之后的结果呢 首先我们看一下提示 Tip: built files are meant t ...
- npm run build 打包后空白页解决问题两种情况
问题一:assetsPublicPath配置错误 解决办法:打开config/index.js文件 build:{ // assetsPublicPath: '/' ass ...
- Vue打包npm run build 打包后空白怎么解决?
问题一:路径报错并且页面空白 解决:buld/index.js assetsPublicPath: '/'修改为 assetsPublicPath: './' 问题二:没报错页面空白 ro ...
- Vue -- vue-cli(vue脚手架) npm run build打包优化
这段时间公司新项目立项,开发组选用 Vue2.0 进行开发.当然也就一并用到 vue cli 进行自动化构建.结果在基础版本开发完成后,用 npm run build 命令打包上线时,发现以下几个问题 ...
随机推荐
- JVM(一)
Java 环境 Java 运行过程 下面几张图,我们可以了解到 Java 这门语言是如何进行运行的. java文件通过编译器编译成class文件,然后在虚拟机中转化为机器语言运行在机器上. 上图展示了 ...
- golang搭建web服务器
一个最简单的golang web服务器 package main import ( "net/http" "fmt" ) func sayHelloWorld( ...
- 移除TFS服务器关系
移除TFS服务器关系:1.将项目和从以前的TFS服务器断开.2.退出VS.3.找到C:\Documents and Settings\Administrator\Local Settings\Appl ...
- mycat安装
一.简介 在互联网数据大爆炸时代,对数据处理的要求越来越高,很明显单实例数据库已经不能满足需求了,这时候数据库的中间件便应运而生.中间件聚集多实例来提供更强的处理能力,并且隐藏了多实例产生的复杂性.m ...
- k8s常用指令集(kubectl kubeadm)
1 Kubectl指令集 1.1 Master查询节点信息 [root@master1 kubernetes-1.10]# kubectl get nodes 1.2 查 ...
- csharp:.net 3.5 using System.Runtime.Serialization.Json read json
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- SQL删除多列语句的写法
SQL删除表中多个列的写法: ALTER TABLE table_name DROP COLUMN COLUMN1,COLUMN COLUMN2,COLUMN COLUMN3 ……
- devexpress 中 XtraTabcontrol 改变BackColor 的方法
装载自CSDN,原文地址 https://blog.csdn.net/zjzytnn/article/details/53699340 今天在实现CAD文件的读和显示操作的时候,需要将CAD文件显示 ...
- SQL Server ->> SQL Server 2016新特性之 -- Dynamic Data Masking
Dynamic Data Masking是为了防止敏感数据暴露给未经授权的用户,以一种最小开销和维护成本的形式.Dynamic Data Masking用于表的字段,相当于盖住字段数据的一部分.比如一 ...
- Linux系统学习之系统启动的5个过程
Linux 系统启动过程 Linux系统的启动过程可以分为5个阶段: 1. 内核引导 当计算机打开电源后,首先是BIOS开机自检,按照BIOS中设置的启动设备(通常是硬盘)来启动.操作系统接管硬件以后 ...