前端自测运行vue打包后的dist文件

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

在Vue项目中,dist目录是代码打包之后生成的文件夹,其中包含了静态资源文件和打包后的JavaScript、CSS等文件。如果要在本地运行打包后的项目文件,可以使用简单的静态服务器来启动。

下面介绍一种使用Node.js中的http-server模块搭建本地服务器的方法:

先查看是否安装node 如未安装请先安装node
node -v  //查看node版本
安装http-server模块。在命令行中执行以下命令: 如以安装请忽略
npm install -g http-server
进入到dist目录。在命令行中执行以下命令(/path/dist是自己项目中dist目录所在的路径):
cd /path/dist
 启动http-server。在命令行中执行以下命令:
http-server
此时,在命令行中会输出一个类似于下面的信息:

前端打包dist,前端,vue.js,javascript

这表示服务器已成功启动,可以在浏览器中输入上图所示的http://127.0.0.1:8080http://192.168.5.26:8080等网址,访问打包后的项目文件。文章来源地址https://www.toymoban.com/news/detail-741339.html

注意,http-server 模块的默认端口是8080,如果已经被占用,可以使用以下命令来指定端口。此时,服务器会在8081端口上启动 
​​​​​​​http-server -p 8081 //修改端口号

到了这里,关于前端自测运行vue打包后的dist文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

领支付宝红包 赞助服务器费用

相关文章

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

    前端打包后生成的dist/build目录,如何在本地启动服务运行 运行 npn run build ,会打包后会产生 dist 或 build 目录 一般情况下,直接打开dist 或 build 目录下的 index.html 会在浏览器看到内容。 然而发现网页一片空白,打开了控制台,看到一片404的各种找不到资源,或者出现跨域的

    2024年02月02日
    浏览(37)
  • 前端build打包生成的dist使用 nginx 运行接口报错405和401问题。

            dist 目录是一个包含了打包后的项目代码和相关依赖项的目录,用于在部署时将项目移植到其他环境中。它提供了一个整理而简化的文件结构,使得部署过程更加方便和可靠。         直接打开报错会空白可以使用 nginx 来启动。Nginx 官方网站:nginx news 下载很快很方

    2024年01月21日
    浏览(38)
  • Vue项目的打包方式(生成dist文件)

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

    2023年04月09日
    浏览(31)
  • 已经打包好了的vue dist文件夹,如何用electron打包成exe桌面应用

    先在项目根目录下(非dist根目录)安装electron electron-packager 再在项目根目录下(非dist根目录)安装electron-packager 然后在dist文件夹下创建main.js文件,内容为 再创建一个文件package.json 在非dist文件夹(注意,是非dist文件夹,就是原本没打包的项目文件里)的package.json文件里,改

    2024年02月19日
    浏览(43)
  • vue项目的打包方式、生成dist文件夹、publicPath、hash、history、assetsPublicPath

    配置 vue.config.js 文件 打开 vue.config.js 文件修改参数,如果项目的目录中没有 vue.config.js 文件,那么需要自建一个配置文件;在根目录 src 下创建文件即可。需注意文件名称必须是 vue.config.js ,然后在文件中写入代码。 ☺☺☺☺☺☺☺ 配置 router/index.js 文件 以上的配置不能混

    2024年02月03日
    浏览(41)
  • Vue通过指令 命令将打包好的dist静态文件上传到腾讯云存储桶 (保存原有存储目录结构)

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

    2024年02月14日
    浏览(30)
  • SpringBoot访问静态资源和jar外部静态资源,部署前端打包后的vue项目放入静态资源里

    记录一下使用SpringBoot访问静态资源和SpringBoot打包之后的jar外部静态资源,在开发的时候,一般选择前后端分离的方式,前端使用vue 后端使用SpringBoot,通常情况下,部署都是前端通过http去请求后端资源,涉及到http请求,那么肯定需要资源的目标地址IP,一般云端部署给到I

    2024年02月09日
    浏览(60)
  • 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日
    浏览(35)
  • vue前端打包Docker镜像并nginx运行

    首先说明咱们的前端项目是基于Vue的,反向代理使用的是nginx 1.打包vue前端项目生成dist文件夹上传至服务器 新建一个文件夹,叫vueDockerTest,下面的文件都需要。 cert是你存放ssl证书的文件夹,nginx.conf 是nginx的配置文件,dist是你打包的前端静态文件 2.修改Dockerfile文件 # 基于

    2024年02月01日
    浏览(43)
  • 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日
    浏览(39)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包