要在本机启动运行前端提供的dist包,需要先安装一个HTTP服务器,例如Apache,Nginx,phpstudy。这里以使用Node.js的http-server为例进行说明

  1. 首先,确保已经安装了Node.js。如果没有安装,可以从官网下载并安装。

  2. 打开终端或命令行窗口,使用以下命令安装http-server

 npm install -g http-server
  1. 进入dist目录,使用以下命令启动http-server
 cd dist
http-server
  1. 修改文件config.json
 {
"version": "0.0.1",
"BASE_URL": "http://localhost:8017", //本地java运行的地址
"secret": "2e54918bc6777"
}
  1. 在浏览器中访问http://localhost:8080,即可查看前端页面。注意:如果前端页面中有需要与后端进行交互的接口,需要确保后端服务已经启动并且接口地址正确

  2. 修改端口

http-server -p 端口号

在浏览器中访问http://localhost:端口号,即可查看前端页面。

如何快速在本地运行你vue打包的的dist文件的更多相关文章

  1. vue项目通过webpack打包生成的dist文件放到express环境里运行(vue+webpack+express)

    1.首先需要的原料肯定是vue打包生成的dist文件 在vue项目目录下运行:npm run build,等待运行结束,会在项目目录下生成一个dist文件夹,里面会生成一些文件(如下图示) 小的项目文 ...

  2. vue项目打包,生成dist文件夹,如何修改文件夹的名字

    vue项目打包之后的dist文件目录是如下 如果想要修改dist或则static文件名称,需要打开config / index.js build: { // Template for index.ht ...

  3. vue中打包之后的dist文件不放在服务器的根目录下

    在工作当中,我使用webpack打包的dist,由于管理的问题,无法被放在服务器根目录下 ,但在目前的vue配置,dist不放在根目录下,访问页面会成为一片空白,于是便要对vue框架的config进行 ...

  4. vue打包后.woff字体文件路径问题处理

    在执行 npm run build 命令打包后,如果出现 .woff 等字体文件找不到的情况 通过设置 vue-style-loader 打包前缀路径解决

  5. vue打包之后在本地运行,express搭建服务器,nginx 本地服务器运行

    一.使用http-server 1.安装http-server npm install -g http-server 2.通过命令进入到dist文件夹 3.运行http-server 以上在浏览器输入 ...

  6. Vue打包上线部署

    一.路径问题 1.脚手架+webpack打包通过npm run build,但是后台tomcat部署上线的时候,会衍生出一些问题,比如,路径问题(因为在项目中,我们使用了绝对路径,这里必须要使用相对路 ...

  7. Vue打包之后部署到 express 服务器上

    Part.1 安装 express npm install express body-parer --save Part.2 在项目根目录下创建 app.js 文件作为启动 express 服务器代码 ...

  8. vue打包后运行在本地/非服务器端环境的访问路径

    vue打包前的配置: 项目目录下--> config文件夹---> index.js: build:  { assetsPublickPath:  './',   // 设置成相对路径   ...

  9. windows下9款一键快速搭建PHP本地运行环境的好工具(含php7.0环境)

    推荐几款一键快速搭建PHP本地运行环境的好工具(含php7.0及apache,nigix,mysql) 首推phpstudy2016和wampServer3.0.6     理由支持php7.0 目前 ...

  10. webpack打包vue项目之后生成的dist文件该怎么启动运行

    亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...

随机推荐

  1. Linux 基础-查看进程命令 ps 和 top

    目录 1,使用 ps 命令找出 CPU 占用高的进程 2,通过 top 命令定位占用 cpu 高的进程 3,htop 系统监控与进程管理软件 4,参考资料 1,使用 ps 命令找出 CPU 占用高的进 ...

  2. 深度学习入门笔记——DataLoader的使用

    如何使用数据集DataSet? 在介绍DataLoader之前,需要先了解数据集DataSet的使用.Pytorch中集成了很多已经处理好的数据集,在pytorch的torchvision.torch ...

  3. 2.5 使用U盘安装Linux系统

    前面章节介绍了如何通过虚拟机 VMware 安装 Linux 系统,而实际开发中,我们更多的是要将 Linux 系统直接安装到电脑上. 直接在电脑上安装 Linux 系统的常用方法有 2 种,分别是用 ...

  4. 9-4 vector对象是如何增长的

    .size():容器中有多少元素 .capacity():不重新分配内存时,可容纳多少元素 .reserve(n):分配至少能容纳n个元素的内存 n>capacity时会分配使得capacity ...

  5. 11.Kubernetes控制器Controller详解

    Kubernetes控制器Controller详解 Statefulset Statefulset主要是用来部署有状态应用 对于StatefulSet中的Pod,每个Pod挂载自己独立的存储,如果一个 ...

  6. Go语言net/http包源码学习

    0.前言 该笔记为笔者第一次学习go的net/http包源码的时候所记,也许写的并不是很精确,希望大家多多包涵,一起讨论学习. 该笔记很大程度的参考了网名为"小徐先生"的前辈所分享 ...

  7. NZOJ 模拟赛5

    T1 逃离遗迹 根据外星人的回信,在遗迹中有分布着三样道具.当三样道具都拿走后,遗迹就很快自动毁灭,所以必须要在最短时间内离开.遗迹可以看作是由N个房间(编号1..N)和N-1条长度不等通道所组成,并 ...

  8. 理解Java FutureTask

    FutureTask实现的功能 它的功能就像他继承的接口一样:Runnable与Future.他实现了一套机制将两者连接起来. Runnable主要方法是run(),用于执行一些程序. Future主 ...

  9. HarmonyOS Next 入门实战 - 创建项目、主题适配

    ​开发一个简单的demo,其中涉及一些鸿蒙应用开发的知识点,其中涉及导航框架,常用组件,列表懒加载,动画,深色模式适配,关系型数据库等内容,在实践中学习和熟悉鸿蒙应用开发. ​​ ​​ 首先下载并安装 ...

  10. InstallShield软件详解

    InstallShield使用说明 文章目录 InstallShield使用说明 术语解释 工程介绍 InstallScript Basic MSI InstallScript MSI 如何选择适合的 ...