vue cli3.0 本地打包并查看

最新推荐文章于 2023-01-11 14:22:55 发布

原创最新推荐文章于 2023-01-11 14:22:55 发布 · 1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#本地打包并查看

vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了两种不同的Node.js项目部署流程。第一种方法使用了serve命令直接从dist目录启动服务，而第二种方法则通过http-server在dist目录下运行服务。这两种部署方式都是在npm run build构建项目之后进行的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.第一种

npm run build
npm i -g serve 
serve -s dist

2.第二种

npm run build
 npm i http-server -g
 cd dist  
 http-server

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_42670357

关注关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue-cli3.0+ 打包优化（六种常用方案）

欧阳的技术博客

04-17

7万+

Vue打包优化实践方案（已上线）

vue-cli 3.0打包webapp的坑

一个没人看的博客

04-11

1798

**本文主要讲解webapp打包流程，沉浸模式更改，双击后退退出app，vue-cli3.0打包开启app白屏问题如果你没有这些问题读到这里就可以退出了** 1.打包流程编译dist文件后在hubilder里把它转换为app项目，云打包 unpackage是配置app图片自动生成的在代码视图里添加这句： "statusbar": { "immersed": t...

参与评论您还未登录，请先登录后发表或查看评论

这个项目是基于vue-cli3.0来构建，并且根据需求做了打包多页面应用；能实时的编译打包；

01-24

这个项目是基于vue-cli3.0来构建，并且根据需求做了打包多页面应用；能实时的编译打包，对于路由做了修改处理，可以完美的跑在前后台不分离的项目中；并且对于配置文件做详细的注释

【开发小记】vue项目打包可视化

GUANYX的博客

09-11

1096

文件的扩大，首屏加载速度逐渐变慢。因此减小文件体积有利于性能的优化。

vue 打包后如何本地预览

yshijb的博客

04-11

1878

npm install http-server -g //找到dist文件夹终端打开 http-server -o

Vue 项目优化——生成打包报告

任磊

11-03

1477

一、命令行形式生成打包报告安装依赖vue-cli-service build --report 1.通过vue-cli的命令选项可以生成打包报告 2.--report选项可以生成report.html以帮助分析报告内二、在vue控制台生成打包报告 1.点击任务->build->运行 2.运行完毕, 点击右侧分析，控制台面板查看报告 3.通过控制台和分析面板，可以方便的看到项目中存在的问题 ...

vue-cli3.0完整项目demo

09-20

vue-cli3.0完整项目demo，路由配置以及vuex多store配置以及调用，不错的学习资料。

vue cli 3.0通用打包配置代码,不分一二级目录

11-19

总的来说，Vue CLI 3.0 通过封装 Webpack API 并提供易于理解的配置选项，极大地简化了项目配置，同时保留了对复杂需求的扩展能力。即使你对 Webpack 不太熟悉，也能通过阅读 Vue CLI 的官方文档，快速掌握配置方法...

vue cli3.0打包上线静态资源找不到路径的解决操作

10-15

在使用 Vue CLI 3.0 进行项目打包时，可能会遇到静态资源（如图片、CSS、JavaScript 文件等）找不到路径的问题。这个问题通常出现在部署到服务器后，因为本地开发环境与线上环境的资源路径不同。以下是如何解决这个...

详解在vue-cli3.0中自定css、js和图片的打包路径

10-16

在Vue CLI 3.0中定制css、js和图片的打包路径涉及到对Webpack配置的修改和定制。Vue CLI 3.0默认使用Webpack作为其项目打包工具，提供了较为详细的配置选项以适应不同的构建需求。 ### 前言在开发Vue应用程序时，...

vue3打包的静态项目怎么在本地上运行

weixin_42576186的博客

01-11

1987

在 Vue 3 中，打包出来的静态项目可以通过以下步骤在本地运行: 安装一个静态服务器，比如 http-server。 npm install -g http-server 进入打包后的项目文件夹，执行以下命令启动服务器，开启本地服务 http-server -c-1 -o 在浏览器中访问 localhost:8080 就能看到项目运行了。注：8080 是默认的端口,如果你的端口被占用...

vue cli3.0 打包并在本地查看

热门推荐

Thea的博客

09-10

3万+

根据以下命令对项目进行打包： 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 ...

vue- cli3.0 打包并在本地查看

Judy1623

02-20

1327

用vue-cli3 直接用npm run build 打包后在本地不能查看解决：在项目的根目录下新建文件： vue.config.js //vue.config.js module.exports = { // 基本路径 publicPath: './' //之前是 baseUrl 从 Vue CLI 3.3 起已弃用，请使用publicPath。 } 如果放...

vue-cli3.0 执行打包指令npm run build后如何本地直接访问index.html

sinat_40697723的博客

05-01

1万+

1：在最外层目录下创建一个vue.config.js文件； 2. 在vue.config.js中输入如下代码： module.exports = { publicPath: './' } 3. 保存后执行npm run build以后会出现一个dist目录，点击里面的index.html文件即可直接访问本次项目，而不需要执行npm run serve。注意：不配置vue.co...

vue cli3.0 打包并在本地查看时页面空白问题

Tang

11-29

2万+

Vue-cli配置打包文件本地预览

ccxh505398633的博客

08-01

4198

Vue-cli配置打包文件本地使用最近做的一个嵌入app的pc端项目，用的也是比较熟悉的vue-cli构建工具构建项目,需要的是打开dist文件夹入口html能加载到本地的静态文件，打包后的index.html加载文件如图： url中的路径据我们所知，最前面为一个反斜杠（/XX），表示从网站根目录开始搜索文件，如果需要相对当前文件夹则需以 ./或者不加反斜杠为路径开头，看来是打包后的...

浏览器控制台查看修改vue项目(vue-cli)数据

hunt_er的博客

11-23

9410

在写vue项目时想到一个问题，项目里面的文件都是一个个的组件，如何在控制台中修改，查看组件data里的值呢？我们知道，用传统的html形式引用vue可以通过给最外层的vue实例命名 var myapp=new Vue({ el:'#app', data:{ a:1 } }) 然后在控制台输入myapp.a=2改变里面data的值,这样在浏览器控制台调试很方便那么现在采用vue-cli构建项目时，里面的文件都是一个个的组件，如何在控制台中修改，查看组件data里的值呢？方法是在creat

vue打包放服务器不显示图片

boy火巨的博客

07-02

1291

1.在config（文件夹）—>index.js中，添加（如图的红色标记区域） 2.在build（文件夹）—>utils.js添加 3.配置完成后，在工程里静态文件存储又分为两种（1）img css 正常引入： img标签引入图片 <img’ src="…/…/static/img/moon.png" class=“test-img”...

解决vue-cli3打包代码后白屏问题

zhengbusi的博客

08-02

9171

前言：最近使用了vue-cli3.0 开发了一个移动网页端项目，准备打包发布了。按照以往的流程 npm run build 问题来了打开 dist index.html 文件发现白屏。打开调试后发现文件引用路径不对根据以往的经验根目录下新建vue.config.js 配置publicPath module.exports = { ... runtim...

Vue CLI 3.0构建自定义组件库教程

"本文主要介绍如何使用Vue CLI 3.0构建自定义组件库，包括创建组件库、预览示例、文档网站、自动化脚本和发布流程。适合对前端框架和组件库开发感兴趣的开发者参考学习。" Vue CLI 3.0 是一个强大的工具，用于快速...