要在本机启动运行前端提供的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. Java高并发Lock接口讲解,精准通知线程间的执行顺序

    题目:两个线程操作一个变量,实现两个线程对同一个资源一个进行加1操作,另外一个进行减1操作,且需要交替实现,变量的初始值为0.即两个线程对同一个资源进行加一减一交替操作. Lock接口与Conditi ...

  2. esp8266+http (PlatformIO)

    esp8266 + http 使用esp8266发起http请求 #include <Arduino.h> #include <ESP8266WiFi.h> #include ...

  3. 3.15 Linux复制文件和目录(cp命令)

    cp 命令,主要用来复制文件和目录,同时借助某些选项,还可以实现复制整个目录,以及比对两文件的新旧而予以升级等功能. cp 命令的基本格式如下: [root@localhost ~]# cp [选项] ...

  4. Galera_Cluster_Mysql部署

    前言 先来了解下它的身世,Galera Cluster是Codership公司开发的一套免费开源的高可用方案 官网为http://galeracluster.com.Galera Cluster即为安 ...

  5. 基于Java+SpringBoot+Mysql实现的古诗词平台功能设计与实现五

    一.前言介绍: 1.1 项目摘要 随着信息技术的迅猛发展和数字化时代的到来,传统文化与现代科技的融合已成为一种趋势.古诗词作为中华民族的文化瑰宝,具有深厚的历史底蕴和独特的艺术魅力.然而,在现代社会中 ...

  6. Mobexterm 串口换行错误

    问题描述 使用 Mobexterm 连接串口时,在回显中存在换行错误问题,严重影响阅读串口数据. 解决方法 在左侧操作窗口中右击发生 换行错误问题 的窗口,比如我需要右击 COM9 右击后,在下拉列表 ...

  7. ETCD存储满了如何处理?

    一.前言 当运行 ETCD 日志报 Erro: mvcc database space exceeded 时,或者查看健康状态显示 failed to commit proposal: Active ...

  8. (Redis基础教程之五)如何在Redis中操作字符串

    如何在ubuntu18.04上安装和保护redis 如何连接到Redis数据库 如何管理Redis数据库和Keys 如何在Redis中管理副本和客户端 如何在Redis中管理字符串 如何在Redis中 ...

  9. JVM学习笔记-操作数栈(Operand Stack)

    Like the local variables, the operand stack is organized as an array of words. But unlike the local ...

  10. Socket Tcp高密集信息广播转发强度测试

    在有些场中存在着大量的消息广播转发,为了了解.net socket tcp在这方面的性能表现,所以做了一个比较极端信息广播转发强度测试.测试场景是以400个连接信息相互广播为测试用例就是当其中一个连接 ...