要命系列-运行vue打包后的文件

最新推荐文章于 2024-04-26 17:20:07 发布
最新推荐文章于 2024-04-26 17:20:07 发布
阅读量1.2k 收藏 9
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sSanGuoSha/article/details/104153874
版权

要命系列-运行vue打包后的文件

如何运行打包后的dist文件看看效果，比如路径什么的有没有问题之类的，那就需要在部署前看看页面有没有崩坏。

废话不多说，看图（ps本人用的是vue-cli4）

在这里插入图片描述

首先npm install -g serve(全局安装)，如果你网速不大好，用淘宝镜像cnpm安装也可以

在这里插入图片描述

再来就是在这一级目录下直接serve -s dist 就可以了

在这里插入图片描述

在这里插入图片描述

然后就可以了~

在这里插入图片描述

是不是觉得很简单很假，，其实这就是不啃vue文档的后果，度娘一搜前几页基本都是安装express-generator生成器什么的~太可怕了。。刚弄完vue还没松口气，还要弄其他的，简直是要我狗命，，

在这里插入图片描述

，先不说繁琐的操作后会不会出现新bug，就操作流程，一眼看过去就想点浏览器右上角的X。

吓得我赶紧看vue文档看看有木有更简单的解决方法，毕竟打包运行查看一系列操作都是必须的，应该有更官方的便捷解决方法，考虑到这里，就有了上面的解决方法

要命系列，早点下班~

sSanGuoSha
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
运行vue打包后的文件
xinbaiyu的博客
02-06 893
首先npm install -g serve(全局安装) 再来就是在这一级目录下直接serve -s dist 就可以了
vue 打包之后如何运行本地文件
qq_36616931的博客
11-29 4614
1. 需要安装http-server      通过npm install -g http-server 进行全局安装 2. 通过命令行进入到dist文件夹    运行http-server 3.在浏览器输入上述地址就可以访问了....
vue打包后本地模拟运行dist静态文件
FiveOKyo的博客
07-27 805
vue打包后本地运行dist静态文件
vue webpack文件打包后的文件如何本地运行
xiaoshengjinbu的博客
02-24 2409
1、安装express-generator npmi express-generator -g 2、创建一个express项目 expressmy-express-project 3、进入项目目录 cdmy-express-project 这时候能看到my-express-project文件夹下的内容是这样的 4、安装相关项目依赖 npm install 然后把刚刚打包后的dist文...
运行vue dist打包文件
qq_23111247的博客
07-12 598
cnpm i -g serve cd dist serve 方法1. 将dist目录下的所有文件放到服务器的根目录 方法2. 用http-server架一个简单的服务器 npm install -g http-server cd dist hs
electron-vue 打包所需文件
03-23
** electron-vue 打包过程中的常见问题及解决方案 ** 1. **依赖版本不兼容**：确保项目中的所有依赖（包括 Vue、Electron、Node.js 等）与 electron-builder 兼容。更新到最新稳定版或回退到已知兼容版本可能解决...
vue-cli 项目打包完成后运行文件路径报错问题
10-16
在开发环境中，Vue CLI 自动处理构建、热更新等各种任务，但在项目打包完成后，可能会遇到运行时的文件路径报错问题。这类问题通常与项目的输出目录设置、静态资源路径引用及服务器部署配置有关。 在 Vue CLI 2.x ...
vue-cli打包后本地运行dist文件中的index.html操作
10-14
主要介绍了vue-cli打包后本地运行dist文件中的index.html操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-multipage vue 模块化开发打包
11-23
在完成开发后，运行构建命令，Vue-multipage 将会处理所有的模块并生成适合生产环境的静态文件。 总的来说，Vue-multipage 结合Webpack 提供了一种高效、模块化的多页面Vue应用开发解决方案，帮助开发者更有序地...
【转】怎样运行 Vue 打包后的项目
qq_33422122的博客
03-01 4615
Vue build 后运行命令，无需放入tomcat根目录
vue打包后dist文件如何在本地启动
shmilywx的博客
01-25 1045
然后打开浏览器访问就可以了，如图是启动成功。1.首先全局安装http-server。
如何运行vue打包之后的dist文件
CLOUDS06的博客
03-29 7915
介绍一种使用Node.js中的http-server模块搭建本地服务器的方法：1.确认已经安装了Node.js；2.安装http-server模块；3.进入到dist目录；4.启动http-server；5.输入网址，访问项目文件。
vue3项目打包后，将dist文件在本地运行
weixin_66582617的博客
03-05 1474
vue3项目开发好后，打包完成，想在本地运行测试打包文件可以通过http-server来启动。2、打包完成后，进入dist打包文件。4、启动dist文件，并指定端口。3、安装http-server。
vue项目npm run build 打包之后如何在本地访问
最新发布
骨子里的偏爱
04-26 1163
vue项目npm run build 打包之后如何在本地访问
vue项目打包后在本地运行
墨灬笙的博客
08-24 5047
vue项目打包后在本地运行 首先运行命令npm run build。运行成功后vue项目中会生成一个dist文件夹。怎样将这个文件夹在本地运行呢？需要如下几个步骤： 1、cd 到dist文件夹中，运行http-server这个命令； 如果出现下面这个错误： 就找到C盘下C:\Windows\System32\WindowsPowerShell的powershell.exe这个文件并用管理员方式进行运行，点开后输入命令 set-ExecutionPolicy RemoteSigned, 之后在项目终端中运行n
Vue打包后如何在本地直接运行？
LoveZJC96的博客
05-30 2093
1.打包 npm run build 2. 解决方法 1.安装express-generator生成器 npm install express-generator -g 2.创建一个express项目 express 名称 3. 进入express项目并安装项目依赖 npm install 4.把dist目录下的所有文件复制到express项目的public文件夹下 5.启动express项目 npm start 6.打开浏览器，输入 http://loca.
vue项目打包后有哪些文件~详析
weixin_40079913的博客
12-15 6430
css文件夹下的.css文件是项目要用到的css文件,当你做webpack打包的时候，会把所有的css样式打包到这里 css文件夹下的.css.map文件是一个Source map文件，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。目的是帮助我们调试被压缩过的css代码，只是方便我们开发的时候做调试使用。 js文件夹下的.js.map依然是Source map文件，方便我们开发时调试js代码使用。 app.js文件里放的...
如何运行webpack打包的vue项目之后的dist文件
qq_35165469的博客
06-15 3049
1、打包vue项目：npm run build会生成一个dist文件 express是一个基于node.js平台的web开发框架 2、安装express、express-generator npm install express -g npm i express-generator -g 3、创建expressDemo项目 express exp...
vue打包后文件路径不对
05-28
您好，关于Vue打包后文件路径不对的问题，有几种可能的原因和解决方法： 1. 打包时未设置正确的publicPath 在vue.config.js中设置正确的publicPath，确保打包后的文件路径正确。 ``` module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/your-project-name/' : '/' } ``` 2. 打包后的文件名包含了hash值 如果您启用了文件名哈希，则需要在引用打包后的文件时使用正确的哈希值。 例如，如果您的样式表文件名为“style.css”，则在HTML中引用时，应该引用打包后的文件名“style.[hash].css”。 3. 服务器配置不正确 如果您将文件部署到服务器，可能需要在服务器上配置正确的文件路径和URL重写规则。 如果以上方法不起作用，请提供更多细节，我将尽力帮助您解决问题。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值