要在本机启动运行前端提供的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. 2024 CSP 游记

    \(\text{CSP-J}\) 游记 \(\text{Day -INF}\) 初赛免了,没有游记. \(\text{Day 0}\) 有点慌,于是打开了游戏跟 \(\text{zjx,sym}\) ...

  2. 细说MySql索引原理

     MySQL索引   MySQL索引的建立对于MySQL的高效运行是很重要的,索引可以大大提高MySQL的检索速度. 可以类比字典,如果要查"mysql"这个单词,我们肯定需要定位 ...

  3. 题解:P6672 [清华集训2016] 你的生命已如风中残烛

    题解:P6672 [清华集训2016] 你的生命已如风中残烛 标签 组合数学 分析 首先引入一个引理. Raney 引理 对于一个长度为 \(n\) 的序列 \(a\),如果 \(\sum\limit ...

  4. Java真的没出路了吗?

    Java从1991年由James Gosling和他的同事们开发, 至今已经三十多年, 我们知道,任何产品都有生命周期, 都要经历从诞生.发展.成熟.消亡四个阶段, 目前的Java已经处在成熟阶段, ...

  5. 2023NOIP A层联测25 T4 滈葕

    2023NOIP A层联测25 T4 滈葕 配血实验与2-SAT. 思路 \(z=1\) 表示配血实验发生凝集反应,设 \(a_i,b_i\) 分别表示第 \(i\) 个人有无凝集原 A,B.(无凝集 ...

  6. Python数据存储之shelve和dbm

    一.shelve 和 dbm 的介绍 shelve 和 dbm 都是 python 自带的数据库管理模块,可以用于持久化存储和检索 python 中的对象. 虽然这两个模块的本质都是建立 key-va ...

  7. jquery加购物车功能

    如下图所示: 点击加入购物车,由下到上出现此弹窗,点击close关闭弹窗. $(".addCar").on("click", function() { var ...

  8. 大语言模型中的MoE

    1.概述 MoE代表"混合专家模型"(Mixture of Experts),这是一种架构设计,通过将不同的子模型(即专家)结合起来进行任务处理.与传统的模型相比,MoE结构能够动 ...

  9. kali 安装 shodan

    声明! 学习视频来自B站up主 泷羽sec 有兴趣的师傅可以关注一下,如涉及侵权马上删除文章,笔记只是方便各位师傅的学习和探讨,文章所提到的网站以及内容,只做学习交流,其他均与本人以及泷羽sec团队无 ...

  10. Nuxt.js 应用中的 render:island 事件钩子

    title: Nuxt.js 应用中的 render:island 事件钩子 date: 2024/12/1 updated: 2024/12/1 author: cmdragon excerpt: ...