运行npm run build之后，会生成一个dist文件夹，里面的目录结构大概是这样的：

生成完的文件我们怎么来运行呢？直接在本地打开inde.html是无法运行的，打包的时候有提示：

构建文件应该通过HTTP服务器提供服务。

所以我们要启动一个HTTP服务器才能够运行。选择一个HTTP服务器，下面用Apache Tomcat和Nginx为例，分别运行一下。

一、部署在IIS中

1：打开iis，添加新网站（选择路径文件为dist本地文件目录，ip跟端口默认就行，不用设置）

2：添加完之后配置hosts文件

3：hosts文件配置地址为刚刚添加新网站的地址

4：配置完之后再浏览器中直接输入网址即可访问

npm run build之后生成的dist如何扔到服务器运行（npm run build之后如何本地运行）的更多相关文章

  1. mpvue使用vant Weapp运行npm run build命令打包后失效

    最近在使用mpvue开发微信小程序,在开发过程中使用有赞的小程序ui框架—— vant Weapp ,至于如何使用在我个人博客中有一篇关于如何使用vant Weapp ,需要的同学请点进这里自行查看. ...

  2. 转载：TypeError: Cannot read property 'compilation' of undefined vue 打包运行npm run build 报错

    转载自:https://www.jianshu.com/p/3f8f60e01797 运行npm run build打包时,报错如下:   我的package.json如下: { ... " ...

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

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

  4. 如何修改build之后生成的文件结构和路径

    因为公司项目结构的原因, 被要求要build之后的文件夹结构要修改为: dist (文件夹) statics (文件夹) mobile (文件夹)  ---->  存放原本 build 之后存在 ...

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

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

  6. React中使用create-react-app创建项目，运行npm run eject建立灰度报错

    我在运行npm run eject建立测试环境和正式环境时候报错 这里的问题是是脚手架添加.gitgnore文件,但是却没有本地仓库,按照以下顺序就可以正常使用 git add . git commi ...

  7. 解决 npm run dev b报错 “'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序 或批处理文件。”

    摘自:https://www.cnblogs.com/laraLee/p/9174383.html 前提: 电脑已经安装了nodeJS和npm,  项目是直接下载的zip包. 在项目目录下运行“npm ...

  8. 运行bee run之后出现的错误以及解决方法Failed to build the application:

      运行bee run之后出现的错误以及解决方法 创建一个beego项目 bee new myapp 在该项目执行下面的代码 bee run 出现的问题 2020/04/22 21:12:07 INF ...

  9. 三面面试官：运行 npm run xxx 的时候发生了什么？

    事情是这样的,直接开讲 面试官:npm run xxx的时候,发生了什么?讲的越详细越好. 我(心想,简单啊): 首先,DNS 解析,将域名解析成 IP 地址,然后 TCP 连接,TCP 三次握手.. ...

随机推荐

  1. winform npoi excel 样式设置

    IWorkbook excel = new HSSFWorkbook();//创建.xls文件 ISheet sheet = excel.CreateSheet("sheet1") ...

  2. LinkedBlockingQueue源码解析（3）

    此文已由作者赵计刚授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 4.3.public E take() throws InterruptedException 原理: 将队 ...

  3. 【BZOJ3238】[AHOI2013]差异

    [BZOJ3238][AHOI2013]差异 题面 给定字符串\(S\),令\(T_i\)表示以它从第\(i\)个字符开始的后缀.求 \[ \sum_{1\leq i<j\leq n}len(T ...

  4. BZOJ 5395--[Ynoi2016]谁的梦（STL&容斥）

    5395: [Ynoi2016]谁的梦 Time Limit: 80 Sec  Memory Limit: 128 MBSubmit: 22  Solved: 7[Submit][Status][Di ...

  5. Minimax-486. Predict the Winner

    Given an array of scores that are non-negative integers. Player 1 picks one of the numbers from eith ...

  6. RF射频技术的原理

    [摘要]射频技术(RF)是Radio Frequency的缩写.较常见的应用有无线射频识别(Radio Frequency Identification,RFID),常称为感应式电子晶片或近接卡.感应 ...

  7. JMeter基础：请求参数Parameters 、Body Data的区别

    使用Jmeter测试时,很多人不知道请求参数Parameters .Body Data的区别和用途,这里简单介绍下 先了解一个接口的基本概念 在客户机和服务器之间进行请求-响应时,HTTP协议中包括G ...

  8. Python小白学习之路（十）—【函数】【函数返回值】【函数参数】

    写在前面: 昨天早睡之后,感觉今天已经恢复了百分之八十的样子 又是活力满满的小伙郭 今日份鸡汤: 我始终相信,在这个世界上,一定有另一个自己,在做着我不敢做的事,在过着我想过的生活.-------宫崎 ...

  9. POJ 2291

    #include<iostream> #include<stdio.h> using namespace std; int compare(void const *,void ...

  10. 剑指offer四十四之翻转单词顺序列

    一.题目 牛客最近来了一个新员工Fish,每天早晨总是会拿着一本英文杂志,写些句子在本子上.同事Cat对Fish写的内容颇感兴趣,有一天他向Fish借来翻看,但却读不懂它的意思.例如,“student ...