1. Toy模板网首页
  2. > Toy博客

前端打包后生成的dist 或 build目录，如何在本地启动服务运行

10月前 作者：AS_TS 分类：Toy博客 阅读(49) 违法举报

这篇具有很好参考价值的文章主要介绍了前端打包后生成的dist 或 build目录，如何在本地启动服务运行。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前端打包后生成的dist/build目录，如何在本地启动服务运行

运行npn run build，会打包后会产生 dist 或 build 目录
一般情况下，直接打开dist 或 build 目录下的 index.html会在浏览器看到内容。
然而发现网页一片空白，打开了控制台，看到一片404的各种找不到资源，或者出现跨域的提示

npm run build的文件怎么在服务器运行,打包工具及其配置,前端,nginx,服务器

解决方案

  • server https://www.npmjs.com/package/server
  • http-server https://www.npmjs.com/package/http-serve
  • live-server https://www.npmjs.com/package/live-server
  • 在本地搭建express服务器
  • 使用nginx本地服务器

方案一

前三种基本使用方法是一致

以 live-server 为例：

  1. 全局安装live-server插件
npm install -g live-server
  1. 在dist 或 build文件夹（刚刚打包成功后多出来的文件夹）终端输入
live-server
  1. 浏览项目
    默认监听在8080端口，打开浏览器，输入localhost:8080 就可以预览了

http://www.51sio2.cn//article/334864831.html

方案二

搭建express本地服务器

具体介绍：
https://www.pudn.com/news/63451f42272bb74d44499443.html

方案三

使用nginx本地服务器运行

具体介绍：
https://www.pudn.com/news/63451f42272bb74d44499443.html

方案四

手动起一个本地服务

具体介绍：
https://www.codenong.com/cs109000079/文章来源地址https://www.toymoban.com/news/detail-786994.html

到了这里，关于前端打包后生成的dist 或 build目录，如何在本地启动服务运行的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Vue通过指令 命令将打包好的dist静态文件上传到腾讯云存储桶 （保存原有存储目录结构）

    Vue通过指令 命令将打包好的dist静态文件上传到腾讯云存储桶 （保存原有存储目录结构）

    1、在项目根目录创建uploadToCOS.js文件 （建议起简单的名字 方便以后上传输入命令方便）  2、uploadToCOS.js文件代码编写 填入你自己的 SecretId、SecretKey、Bucket、Region 3、在控制台输入  直到所有文件传输完成   记得在此之前开放存储桶跨域访问权限 这个可以看我另一篇文章

    2024年02月14日
    浏览(40)

  • vue +WebSDK_V3.3.0/本地调试和打包成dist部署还有所不同！！

    1.在index.html中引入js文件 2.在vue中使用需要修改webVideoCtrl.js文件中引入jsVideoPlugin-1.0.0.min.js的方式如下 在使用到页面中 html js 小小功能整了一天：记住以下要点 1.在网上找了几篇文章cv的时候在index.html以内的文件名错了。。。。离离原上谱，，， 2.最开始后端大哥教我 无需安

    2024年03月13日
    浏览(51)
  • 如何运行vue打包之后的dist文件

    如何运行vue打包之后的dist文件

    在Vue项目中，dist目录是代码打包之后生成的文件夹，其中包含了静态资源文件和打包后的JavaScript、CSS等文件。如果要在本地运行打包后的项目文件，可以使用简单的静态服务器来启动。 下面介绍一种使用Node.js中的http-server模块搭建本地服务器的方法： 确认已经安装了Node.

    2023年04月23日
    浏览(38)
  • webpack如何把dist.js中某个模块js打包成一个全局变量，使得在html引入dist.js后可以直接访问

    webpack如何把dist.js中某个模块js打包成一个全局变量，使得在html引入dist.js后可以直接访问

    webpack可以通过使用expose-loader来将模块中的一个js文件暴露为全局可以访问的变量。下面是一个示例代码： 1、安装expose-loader npm install expose-loader --save-dev 2、webpack.config.js配置文件 值得注意的是：我在本地使用16.14.2版本的node打包时会报一些警告，升级node18.12.1未报警告，警告

    2024年01月24日
    浏览(45)
  • 【http-server】http-server的安装、前端使用http-server启动本地dist文件服务:

    【http-server】http-server的安装、前端使用http-server启动本地dist文件服务:

    一、http-server 简介: http-server 是一个简单的零配置的命令行 http服务器，它足够强大便于生产和使用，用于本地测试和开发。 有时候我们打开一个文档使用file协议打开的时候，不能发送ajax请求，只能使用http协议才能请求资源，具体的区别大家可以去参考[这篇文档] (www.cnblo

    2024年02月16日
    浏览(44)
  • nginx: 部署前端项目的详细步骤（vue项目build打包+nginx部署）

    nginx: 部署前端项目的详细步骤（vue项目build打包+nginx部署）

    目录 第一章 前言 第二章 准备工作 2.1 项目打包理解 2.1.1 打包命令 2.1.2 理解npm run serve/dev 和 npm run build命令 2.2 nginx参数配置理解 2.2.1 nginx常用基本命令 2.2.2 默认配置 2.2.3 搭建不同网站的站点 2.2.4 禁止访问的目录以及一键申请SSL证书验证目录相关设置 2.2.5 根据文件类型设置

    2024年02月04日
    浏览(59)

  • [CMakeLists]使用CMake后如何将目录内容复制到build目录

    你可以用add_custom_command. 说你的目标被调用 MyTarget ,然后你可以这样做: 每次构建 MyTarget 并将\\\"/ config\\\"的内容复制到目标exe/lib最终的目录时,都会执行此操作. 正如马克Lakata在下面评论指出,更换 PRE_BUILD 用 POST_BUILD 在 add_custom_command 确保复制如果生成成功才会发生. 说明 ${CMAKE_CO

    2024年02月16日
    浏览(40)
  • 前端vue打包时遇到‘default‘ is not exported by node_modules/vue/dist/vue.runtime.esm-bundler.js, imported by

    前端vue打包时遇到‘default‘ is not exported by node_modules/vue/dist/vue.runtime.esm-bundler.js, imported by

    主要原因是由于用到的组件进行npm i时默认使用的是vue2，不支持vue3，但是前端框架使用的是vue3，所以导致重构编码时会报错， 网上查询说         当我们在使用rollup编译es6时，可能会遇到以下报错问题，需要 安装@rollup/plugin-commonjs插件 npm install @rollup/plugin-commonjs 最后，

    2024年02月05日
    浏览(65)
  • DONE Build complete. The dist directory is ready to be deployed.

    DONE Build complete. The dist directory is ready to be deployed.

      npm run build   命令执行完出现  DONE  Build complete. The dist directory is ready to be deployed.  INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html 可以根据官方文档 目录需要启动一个 HTTP 服务器来访问 (除非你已经将  publicPath  配置为了一个相对的值)，所以以  file

    2024年02月11日
    浏览(40)
  • Vue项目的打包方式（生成dist文件）

    Vue项目的打包方式（生成dist文件）

    目录 一、相关配置 情况一（使用的工具是 vue-cil） 情况二（使用的工具是 webpack）  二、打包  情况一（使用的工具是 vue-cil）         如果是用 vue-cli 创建的项目，则项目目录中没有 config 文件夹，所以我们需要自建一个配置文件；在根目录 src 下创建文件 vue.config.js，

    2023年04月09日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包