如何快速在本地运行你vue打包的的dist文件
要在本机启动运行前端提供的dist包,需要先安装一个HTTP服务器,例如Apache,Nginx,phpstudy。这里以使用Node.js的http-server为例进行说明
首先,确保已经安装了Node.js。如果没有安装,可以从官网下载并安装。
打开终端或命令行窗口,使用以下命令安装http-server
npm install -g http-server
- 进入dist目录,使用以下命令启动http-server
cd dist
http-server
- 修改文件config.json
{
"version": "0.0.1",
"BASE_URL": "http://localhost:8017", //本地java运行的地址
"secret": "2e54918bc6777"
}
在浏览器中访问http://localhost:8080,即可查看前端页面。注意:如果前端页面中有需要与后端进行交互的接口,需要确保后端服务已经启动并且接口地址正确
修改端口
http-server -p 端口号
在浏览器中访问http://localhost:端口号,即可查看前端页面。
如何快速在本地运行你vue打包的的dist文件的更多相关文章
- vue项目通过webpack打包生成的dist文件放到express环境里运行(vue+webpack+express)
1.首先需要的原料肯定是vue打包生成的dist文件 在vue项目目录下运行:npm run build,等待运行结束,会在项目目录下生成一个dist文件夹,里面会生成一些文件(如下图示) 小的项目文 ...
- vue项目打包,生成dist文件夹,如何修改文件夹的名字
vue项目打包之后的dist文件目录是如下 如果想要修改dist或则static文件名称,需要打开config / index.js build: { // Template for index.ht ...
- vue中打包之后的dist文件不放在服务器的根目录下
在工作当中,我使用webpack打包的dist,由于管理的问题,无法被放在服务器根目录下 ,但在目前的vue配置,dist不放在根目录下,访问页面会成为一片空白,于是便要对vue框架的config进行 ...
- vue打包后.woff字体文件路径问题处理
在执行 npm run build 命令打包后,如果出现 .woff 等字体文件找不到的情况 通过设置 vue-style-loader 打包前缀路径解决
- vue打包之后在本地运行,express搭建服务器,nginx 本地服务器运行
一.使用http-server 1.安装http-server npm install -g http-server 2.通过命令进入到dist文件夹 3.运行http-server 以上在浏览器输入 ...
- Vue打包上线部署
一.路径问题 1.脚手架+webpack打包通过npm run build,但是后台tomcat部署上线的时候,会衍生出一些问题,比如,路径问题(因为在项目中,我们使用了绝对路径,这里必须要使用相对路 ...
- Vue打包之后部署到 express 服务器上
Part.1 安装 express npm install express body-parer --save Part.2 在项目根目录下创建 app.js 文件作为启动 express 服务器代码 ...
- vue打包后运行在本地/非服务器端环境的访问路径
vue打包前的配置: 项目目录下--> config文件夹---> index.js: build: { assetsPublickPath: './', // 设置成相对路径 ...
- windows下9款一键快速搭建PHP本地运行环境的好工具(含php7.0环境)
推荐几款一键快速搭建PHP本地运行环境的好工具(含php7.0及apache,nigix,mysql) 首推phpstudy2016和wampServer3.0.6 理由支持php7.0 目前 ...
- webpack打包vue项目之后生成的dist文件该怎么启动运行
亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...
随机推荐
- buck电路 & boost电路
buck电路 buck电路是直流的降压电路,我们下面给大家讲下,如何把12V的直流电压降压成5V的直流电压 1.buck电路拓扑:12V----->5V 2.降压原理 a.开关闭合,电流走向 电 ...
- 4年经验来面试20K的测试岗,连基础都不会,还不如招应届生。
公司前段时间缺人,也面了不少测试,结果竟然没有一个合适的.一开始瞄准的就是中级的水准,也没指望来大牛,提供的薪资在10-20k,面试的人很多,但平均水平很让人失望.看简历很多都是3.4年工作经验,但面 ...
- Flink Time
基础概念 支持三种时间概念: Processing Time 时间递增 Ingestion Time : 摄入时间,数据进入Flink框架的时间,在Source Operator中设置,每个事件拿到当 ...
- 题解:CF685A Robbers' watch
题解:CF685A Robbers' watch 感觉这题难点主要在理解题意. 题意 一天 \(n\) 个小时,一小时 \(m\) 分钟,手表用 \(7\) 进制表示时间(位数未填满补前导零),求问这 ...
- 很干,但实用——4G模组供电设计及其选型推荐
4G模组的外部电源供电设计十分重要,对系统稳定.射频性能都有直接影响. 怎么让工程师朋友们在应用开发中少走弯路呢? 我将以Air780E为例,陆续分享系列实用干货.无论你是专家还是菜鸟,无论你是否 ...
- gal game 杂谈——前言
gal game 杂谈--前言 大年三十凌晨(早上)打算开始写了吧,作为第一篇先写一些前言好了. 第一次接触gal game还是在B站上看到有人玩<我和她的世界末日>当时觉得挺有意思的,加 ...
- MySQL同步ES方案
1. 前言 在实际项目开发中,我们经常将 MySQL 作为业务数据库,ES 作为查询数据库,用来实现读写分离,缓解 MySQL 数据库的查询压力,应对海量数据的复杂查询. 这其中有一个很重要的问题,就 ...
- Linux之新增硬盘,分区,挂载
1.新增硬盘后, 查看当前磁盘信息 fdisk -l 可以看到除了当前的第一块硬盘(sda)外还有一块sdb的第二块硬盘(sdb),然后用命令: fdisk /dev/sdb 给第二块硬盘进行分区 ...
- 基于rsync+sersync的服务器文件同步
参考:https://github.com/wsgzao/sersync 原理 Synchronize files and folders between servers -using inotiy ...
- elementui半年选择组件
1.基于elementui开发的半年选择组件 2.调用 <el-halfyear-picker v-model="date" :size="size"&g ...