vue项目打包之后在本地运行

最新推荐文章于 2024-09-15 22:47:58 发布
最新推荐文章于 2024-09-15 22:47:58 发布
阅读量1.6k 收藏 3
点赞数 1
分类专栏： 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/youngjqz/article/details/110007383
版权

live-server 是一款 npm 工具,首先需要安装

yarn add live-server -S

命令行常用配置表
在这里插入图片描述
在项目中找到package.json 文件,修改 scripts 部分

"live-serve": "live-server ./dist --port=8081",

在这里插入图片描述
先执行 build 生成 dist 文件,接着运行 live-serve 即可

yarn run live-serve

运行成功
在这里插入图片描述

youngjqz
关注
专栏目录
vs-code中用liveServer打开vue-cli打包后的html，模拟查看线上路径问题
zzqz的博客
05-13 4754
首先在扩展搜索liveServer下载安装 之后右键html就会出现liveServer命令 我用的vue-cli版本是3.2，为防止路径问题，在vue.config.js中修改publicPath为 module.exports = { publicPath: "./" } 完成重新打包 在vscode 配置 setting.json 中配置liveServer { "live...
解决vue项目打包上服务器显示404错误,本地没出错的问题
01-22
2、运行，在本地运行没问题，接着打包上服务器，遇到404的错误，如下 这是webpack打包的结果，解决办法如下 1、修改build文件夹下的utils.js文件，大约在51行添加 publicPath:../../ if (options.extract) { ...
vue打包本地启动方案
qq_28875189的博客
05-23 1029
在本地启动Vue打包的方案有很多种。
[精选]本地运行vue项目
最新发布
cxsj999的博客
09-15 798
这里简单介绍下 npm run dev 命令，其中的“run”对应的是package.json文件中，scripts字段中的dev，也就是 node build/dev-server.js命令的一个快捷方式，至于是npm run dev 还是npm run start看package.json里面的值，我们这里是dev。npm包管理器，是集成在node中的，所以，直接输入 npm -v就会如下图所示，显示出npm的版本信息。下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。
vue 打包之后如何运行本地文件
wwf1225的博客
05-26 5312
vue 打包之后如何运行本地文件 1. 需要安装http-server 通过npm install -g http-server进行全局安装 2. 通过命令行进入到dist文件夹 运行http-server 3.在浏览器输入上述地址就可以访问了. 第二篇博客：https://blog.csdn.net/qq_22713201/article/details/95630246 ...
vue本地打包预览
小韩要快乐！
04-30 408
【代码】vue本地打包预览。
Vue中 打开打包文件 open with live Server 命令
weixin_58207509的博客
11-02 2244
当我们项目打包后 如何打开展示呢 作为初学者这个问题还是不可避免的 如下 如果我们直接在Vscode中ALt+B看页面 点击登录会报这个错 页面的url将会是它存储在电脑上的物理位置，就相当于你直接对html文件双击打开一样 解决方法 VScode,需要下载Live Server插件 然后打开文件时，不要使用open in Browser,而是在右击鼠标弹出菜单栏里选择open with live Server，使用web服务器打开。此时才会正常运行 ...
vue-cli打包后本地运行dist文件中的index.html操作
10-14
标题和描述中提到的核心知识点是如何使用Vue CLI打包后的项目在本地环境中运行。Vue CLI是Vue.js的官方命令行工具，它简化了Vue.js项目...通过理解和掌握这些知识点，可以更好地处理Vue项目打包和本地运行的常见问题。
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
12-12
Vue 项目通过 Webpack 打包后，会在项目根目录下生成一个 `dist` 文件夹，这个文件夹包含了构建后的所有产出文件，适合部署到生产环境。 Vue 项目结构通常包含源代码、配置文件等。当执行 `npm run build` 命令时，...
vue项目打包后打开页面空白解决办法
08-27
在 Vue 项目开发中，经常会遇到打包后打开页面为空白的情况，本文将详细介绍解决这种问题的方法。 一、路径问题 在 Vue 项目中，index.html 文件中的内容都是通过 script 标签引入的，因此路径的问题是导致页面为...
Springboot项目与vue项目整合打包的实现方式
08-25
Springboot项目与Vue项目整合打包的实现方式 在现代软件开发中，前端和后端项目的分离开发和集成是非常常见的。在这种情况下，我们需要在开发时将前端和后端项目分离，以便于更好地维护和更新代码。但是，在部署时...
1：利用http-server测试vue-cli打包后的项目
jdBug
03-20 1327
目前在练习Vue，利用vue-cli脚手架开发了个vue2.0仿唯妮海购项目，在生产环境中一切良好，项目暂时告一段落，根据官方的npm run build打包后发现，在自己没有线上服务器的情况下，测试成为一大难题（实践发现，后面还有很多坑等着去填~~）。 1：打包测试（搭建服务器） 打包后的代码必须放在服务器下才能运行哦！直接双击index.html是不行的。 利用node.js的 http-se...
本地serve跑vue或者react打包后的项目
刻痕
06-13 1481
## 本地跑vue或者react打包后的项目 不需要本地服务器跑打包后的build文件夹（也可能是 dist文件夹）项目。 **一般方案：** 1. 方案一：本地电脑运行serve服务（本文~~） 2. 方案二：vscode编辑器安装拓展【live server】，build文件夹index.html右击菜单运行live server，自动打开浏览器看结果（本质上和方案一一样） 3. 方案三：hbuliderX编辑器，直接运行index.html就是本地微服务，自动打开浏览器看结果（本质上和方案一
Vue3打包后在本地运行
qq_42764782的博客
04-12 2829
背景 先在项目跟目录正常打包生成文件dist文件 npm run build 发现打包后目录变这种了，这种本地是无法直接访问的， 解决办法 1.安装本地访问服务插件serve npm install -g serve 2.在dist文件夹里，运行 npm run serve 结果 然后就可以直接访问了 ...
vue-cli打包后本地查看起http-serve服务——基础积累
yehaocheng520的博客
05-10 1684
vue-cli打包后本地查看起http-serve服务
vue本地打包文件 运行 liveServer
qq_38935512的博客
12-15 1660
live-server 是一款 npm 工具，全局安装 npm i -g live-server 后，项目目录使用 live-server 命令行命令便可直接在浏览器中预览（默认找 index.html，其他需要带上文件名空格后跟在后面），并且自动全局监听实时更新。关于live-server配置 可以在setting.json 中去配置 可以百度一下它的属性。
怎么在本地电脑上运行vue项目打包出来的dist文件
zayyo的博客
07-27 2985
如何在本地运行我们的dist文件夹
【转】怎样运行 Vue 打包后的项目
qq_33422122的博客
03-01 4694
Vue build 后运行命令，无需放入tomcat根目录
vue项目打包之后怎么在本地运行
热门推荐
萧萧的博客
07-12 1万+
vue项目打包后的文件需要在本地运行，这里介绍两种方法 （一）搭建express本地服务器 1、安装express-generator npm i express-generator -g 2、创建一个express项目 express my-express-project 3、进入项目目录 cd my-express-project 这时候能看到my-express...
webpack打包vue项目之后生成的dist文件本地运行
09-02
在使用webpack打包vue项目后生成的dist文件，我们可以通过以下步骤在本地运行： 1. 首先，我们需要将dist文件夹复制到我们项目的根目录下。假设我们的项目名为"my-project"，现在我们的项目目录结构如下： ``` my-project ├── src │ ├── components │ ├── views │ └── ... ├── dist ├── ... ├── package.json └── ... ``` 2. 然后，我们需要安装一个本地服务器，以便在本地运行我们的打包后的项目。我们可以通过使用Node.js的http-server模块来实现。在终端中，进入我们的项目根目录，并运行以下命令来安装http-server： ``` npm install http-server --save-dev ``` 3. 安装完http-server后，我们可以在package.json文件中的"scripts"字段下添加一个启动脚本。在"scripts"字段下添加以下内容： ``` "scripts": { "serve": "http-server dist" } ``` 4. 然后，在终端中运行以下命令来启动我们的本地服务器： ``` npm run serve ``` 这将会在本地启动一个服务器，并将"./dist"目录设置为默认的静态文件目录。我们可以通过访问"http://localhost:8080"来预览打包后的项目。 通过以上步骤，我们成功在本地运行了通过webpack打包后生成的dist文件。您可以在本地进行调试和预览，以确保打包后的项目正常运行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值