webpack打包vue项目之后生成的文件如何运行

最新推荐文章于 2024-08-01 14:29:45 发布
最新推荐文章于 2024-08-01 14:29:45 发布
阅读量3.3k 收藏 6
点赞数 1
分类专栏： vue-js webapck
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013746071/article/details/90695835
版权

我的项目里面：webpack打包之后生成的文件放在 market 目录下；
所以根据官方文档可以做如下操作：

npm install -g serve    (全局安装) 
serve -s market          (运行打包后的文件)

在这里插入图片描述
这样在：http://localhost:5000 这个网址就能看到打包之后的效果了；
注意：一般前端项目里面的请求是通过代理请求其他后端接口的，如果本地没有后端接口服务器，那么访问的页面是没有数据的，请求数据是失败的。

第二个项目：打包之后的文件是在dist里面；
在这里插入图片描述
在这里插入图片描述

曾曾子
关注
专栏目录
使用webpack打包后的vue项目如何正确运行（express）
10-17
主要介绍了使用webpack打包后的vue项目如何正确运行（express） ,接下来通过本文给大家详细介绍，需要的朋友可以参考下
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
08-28
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法总结篇 在本文中，我们将讨论webpack vue项目打包生成的文件中资源文件报404问题的修复方法。在使用webpack + vue做个人娱乐项目时，可能会出现css js ...
vue 固定名称 打包时_Vue打包后出现的数字文件名是干嘛的？
weixin_33410880的博客
12-24 770
Asset Size Chunks Chunk Namesstatic/css/app.e0310bcdfcb96243e5c0d9d1a90597e8.css.map 386 kB [emitted]static/fonts/element-icons.6f0a763.ttf 11 kB [...
Vue反编译dist包到源码
最新发布
油墨香^-^的博客
08-01 519
1.首先需要在管理员模式下打开cmd2.找到需要编译的dist/static/js的目录下 执行完成后在该目录会看到目录下存在下面的文件名：0.7ab7d1434ffcc747c1ca.js.map，这里以0.7ab7d1434ffcc747c1ca.js.map为例，如下图:3.全局安装reverse-sourcemap资源npm install --global reverse-sourcemap4.反编译 执行：reverse-sourcemap --output-dir source。
vue 打包后如何转换回去
lz805927的博客
08-03 1万+
1.首先打开上传后的地址，找到Sources 如图下 2.打开top，第一个这里是css。 3.打开top，第二个webpack这里是你的封装的东西以及你的组件。如图下 4.webpack这里 打开 ·
Vue项目打包成exe可执行文件（无瑕疵，完美版）
热门推荐
往事随风
11-09 1万+
Vue项目打包成exe可执行文件 实现思路：从electron官网上拉取代码，把官网上拉取下来项目中的index.html替换成 自己vue项目打包好的dist文件中的index.html，输入打包exe的命令即可 1、 拉取electron官网上的demo，拉下来之后安装依赖，项目跑起来之后，就不用管demo了，开始配置自己的Vue项目 git clone https://github.com/electron/electron-quick-start npm i npm run start 2、修改自
Vue打包后生成一个可修改接口地址的配置文件
林中明月间丶
10-08 2806
先给几个参考： https://blog.csdn.net/cccdf_jjj/article/details/99593533vue2.0中实现打包后可配置接口地址 https://blog.csdn.net/qq_41409679/article/details/84878642?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth..
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
12-12
Webpack 是一款强大的模块打包...总之，Webpack 打包 Vue 项目后生成的 `dist` 文件需要部署到服务器才能正确运行，通过结合 Express.js 可以快速搭建一个简单的服务器环境，实现打包后 Vue 项目的本地预览或线上部署。
webpack + vue 打包生成公共配置文件（域名） 方便动态修改
01-19
需求原因  原来的项目中域名是打包到项目里面的，打包后不能动态配置，只能...在项目的根目录下新建 serverConfig.json 以后会根据这个文件去生成打包的配置文件 {ProdUrl:http://text.com} 第三步 引入generate-ass
使用webpack打包后的vue项目如何运行（express）
weixin_30814319的博客
05-12 478
　　我们知道使用webpack打包vue项目后会生成一个dist文件夹，dist文件夹下有html文件和其他css、js以及图片等，那么打包后的文件该如何正确运行呢？ 　　倘若直接打开html文件，会报如下错误： 　　　　 　　那么该如何运行呢？其实可以将生成的dist文件部署到express服务器上运行。 　　（1）、安装express-generator生成器。 　　　　npm...
将vue项目打包成电脑端应用.exe
diavid的博客
05-13 694
最近在编写一个软件系统，让将打包好的vue工程，变成电脑端.exe可执行程序呈现，之前没有涉及到过这方面的开发，所以到了网上看了相关的操作流程，现在最主流的打包方式有两种，一种是electron更换自己项目的demo，另一个就是再electron中修改，主要修改的是自己项目的路径。经过漫长的等待，我们就可以看到项目当中出现一个App-win32-x64的文件夹，这个文件夹就是打包好的桌面应用，文件夹当中会有一个App.exe文件，这个就是我们的启动文件。然后就是傻瓜式安装，一直next。
vue.js工程转exe执行程序说明
01-15
主要记录在vue.js工程在利用electron转exe可执行程序时遇到的各种问题及解决办法。
webpack + vue 打包生成公共配置文件（域名） 方便动态修改
郑州彭于晏
04-15 642
需求: 原来的项目中域名是打包到项目里面的，打包后不能动态配置，只能通过不同的指令打包来切换域名，每天都在测试域名和正式域名来回摩擦，后台大佬说你们可以生成一个配置文件这样就不用频繁打包了直接修改配置文件就好. 1.安装插件 npm install --save-dev generate-asset-webpack-plugin 2.新建配置文件 在项目的根目录下新建 serverConfig....
vue项目打包放入javaweb中
H1455483319的博客
10-14 2630
1.修改vue中路由的模式为hash，或者不写（默认hash） const router = new VueRouter({ routes }) 2.将入口的main.js中的axios请求地址前缀删除 或者注释 // axios.defaults.baseURL = '/api' 3.执行npm run build进行打包，会生成dist文件 4.将static和index.html放入java项目中的webapp下 5.删除WEB-INF下的index.jsp 6.启动服务器 ...
webpack项目部署到服务器,vue项目通过webpack插件打包后自动部署到服务器
weixin_39841825的博客
08-05 724
我们在实际开发中经常会遇到版本不停迭代，然后我们需要把webpack打包好的文件上传出到服务器，这个是比较麻烦的，今天我给大家分享一个在vue项目中通过运行npm run build 生成打包好的文件后直接上传服务器，不要我们每次都手动拷贝。这个方案的思路是我们自己写一个的webpack的插件，在打包完成的时候把生成的文件名和数据通过post请求上传服务器，服务器获取到数据和文件名，重新生成文件到...
如何打包Vue项目成桌面应用生成exe文件流程
qq_39511525的博客
06-15 1639
1.先了解Inno Setup Compiler的用法参考网址：https://www.cnblogs.com/happyamyhope/p/7486039.html 2.打包需要用到的是electron，具体的方法参考：https://segmentfault.com/a/1190000011971612这里就不做说明 npm install electron --save-dev npm install electron-packager --save-dev //这个是打成exe文件的插件，之
Linux文件I/O编程（二）
hello
10-18 502
目录 实现cp指令 修改文件某字段内容 写一个整数到文件 写结构体数组到文件 标准C库文件I/O函数 标准C库函数（fopen、fwrite、fread、fseek、fclose） 实现cp指令 文件名通过参数传入，打开文件 —>读取内容到缓冲区—>缓冲区内容写入目标文件。 #include <stdio.h> #include <string.h> #include <stdlib.h> #include <sys/types.h.
Vue项目的打包方式、生成dist文件夹、assetsPublicPath、publicPath、history、hash
我的"CSDN"博客主页地址：https://mengjian.blog.csdn.net/
04-01 4807
Vue项目的打包方式、生成dist文件夹、assetsPublicPath、publicPath、history、hash
VUE前端打包发布到tomcat
weixin_42587270的博客
05-23 1733
整体思路： 后端和前端都打包用tomcat部署。部署在同一个tomcat下的webapp目录下。这样不会出现跨域问题。开发时前后端分离开发，为了解决跨域，在vite.config.js中会配置proxy反向代理，但是打包发布的时候，这个代理时不生效的，需要在web容器中配置代理。 这里前后端都用同一个tomcat发布的话，不存在跨域，就不用配置代理了。 1、项目打包之前，需要调整一点配置。假如前端访问地址时 127.0.0.1:8081/glui,这样项目访问后台接口时，访问的地址就会是127.0.0.1:
webpack打包vue项目之后生成的dist文件本地运行
09-02
在使用webpack打包vue项目后生成的dist文件，我们可以通过以下步骤在本地运行： 1. 首先，我们需要将dist文件夹复制到我们项目的根目录下。假设我们的项目名为"my-project"，现在我们的项目目录结构如下： ``` my-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值