运行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. .net推送微信消息模板

    1.获取access_token public string GetAccess_Token() { string appid = WxPayConfig.APPID; string appsecre ...

  2. leetcode 最后一个单词的长度

    给定一个仅包含大小写字母和空格 ' ' 的字符串,返回其最后一个单词的长度. 如果不存在最后一个单词,请返回 0 . 说明:一个单词是指由字母组成,但不包含任何空格的字符串. 示例: 输入: &quo ...

  3. 如何在 .NET Core 上测试库

    设置解决方案. 可使用以下命令实现此目的: mkdir SolutionWithSrcAndTest cd SolutionWithSrcAndTest dotnet new sln dotnet n ...

  4. Android事件分发机制浅析（2）

    本文来自网易云社区 作者:孙有军 上面的两次执行中每次都调用了onInterceptTouchEvent事件,这个到底又是啥?我们去看看他的返回值是什么? public boolean onInter ...

  5. Day6 ,周期末考试试题

    Python基础数据类型考试题 考试时间:两个半小时                      满分100分(80分以上包含80分及格) 一,基础题. 1,简述变量命名规范(3分) 2,字节和位的关系 ...

  6. PHP中操作mysql的函数

    (1)mysql_num_rows(),对应select操作,获取select结果中数据集的行数:(2)mysql_affected_rows(),对应update.delete.insert操作,影 ...

  7. strlen()与mb_strlen()的区别

    1,strlen()是php的内置函数,可以在php中直接调用:mb_strlen()是php的扩展,需要配置php.ini,以开启mb_strlen()扩展.在php.ini中加载了php_mbst ...

  8. postgresql 脏读-dirtied

    共享缓冲区 在内存中读取或写入数据总是比在任何其他介质上更快.数据库服务器还需要用于快速访问数据的内存,无论是READ还是WRITE访问.在PostgreSQL中,这被称为"共享缓冲区&qu ...

  9. chrome inspect 远程调试H5

    chrome://inspect/#devices 一个内置于chrome的远程调试指令,满足远程调试的几个必须条件 1,能够访问https://chrome-devtools-frontend.ap ...

  10. 【BZOJ3143】【HNOI2013】游走 高斯消元

    题目传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=3143 我们令$P_i$表示从第i号点出发的期望次数.则$P_n$显然为$0$. 对于$P ...