运行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. C#使用cplex求解简单线性规划问题（Cplex系列-教程二）

    若还未在项目中添加cplex的引用,可以参阅上一篇文章.本文主要介绍利用C#求解线性规划的步骤,对线性规划模型进行数据填充的两种方法,以及一些cplex函数的功能和用法.包括以下几个步骤: 描述 先花 ...

  2. JavaScript获取某年某月有多少天以及第一天是星期几

    function getDaysWeekady(year,month) { var date = new Date(year, month-1, 1);//月份是0-11 var date2 = ne ...

  3. CentOS 7 - 最小化安装后，安装GNOME！！

    CentOS 7的最小化安装,并没有安装任何X Window,GNOME是比较好的一个X Window,我决定安装GNOME! 通过yum grouplist命令,我发现GNOME已经处于可以安装列表 ...

  4. 利用tensorflow训练简单的生成对抗网络GAN

    对抗网络是14年Goodfellow Ian在论文Generative Adversarial Nets中提出来的. 原理方面,对抗网络可以简单归纳为一个生成器(generator)和一个判断器(di ...

  5. JavaScript基础函数和词法分析以及常用的内置对象和使用方法（4）

    day52 参考:https://www.cnblogs.com/liwenzhou/p/8004649.html 函数 函数定义 JavaScript中的函数和Python中的非常类似,只是定义方式 ...

  6. webpack快速入门——配置文件：入口和出口，多入口、多出口配置

    1.在根目录新建一个webpack.config.js文件,然后开始配置: const path = require('path'); module.exports={ //入口文件的配置项 entr ...

  7. 十分钟用 Node 命令行工具打造 react-cli 脚手架

    如果你有以下想法: 每次新开项目需要copy一堆文件/文件夹,太烦!想要快速建立工程 用了vue-cli.react-app,羡慕!想要自己做一个 你只需花十分钟时间,做一个Node命令行工具,打造属 ...

  8. LINUX中如何查看某个端口是否被占用

    之前查询端口是否被占用一直搞不明白,问了好多人,终于搞懂了,现在总结下: 1.netstat  -anp  |grep   端口号 如下,我以3306为例,netstat  -anp  |grep   ...

  9. （转）AIX下镜像制作与取消，更换硬盘问题

    AIX下镜像制作与取消,更换硬盘问题 ROOTVG做镜像问题: 下面命令全部在AIX5.4上运行通过 # lspv hdisk0      000a1ddc7f36a2f0      rootvg   ...

  10. Java之集合(二十六)ConcurrentSkipListMap

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7542578.html 1.前言 一个可伸缩的并发实现,这个map实现了排序功能,默认使用的是对象自身的compa ...