vue本地打包预览

--- ---

已于 2023-02-09 15:10:30 修改

阅读量822

点赞数

分类专栏： js vue javaScript 文章标签： vue.js 前端 javascript

于 2023-02-09 15:08:47 首次发布

本文链接：https://blog.csdn.net/weixin_43040026/article/details/128952760

版权

js 同时被 3 个专栏收录

25 篇文章 3 订阅

订阅专栏

vue

8 篇文章 0 订阅

订阅专栏

javaScript

7 篇文章 0 订阅

订阅专栏

1、项目打包

npm run build

2、安装serve

npm install -g serve

3、在项目的 dist 文件运行命令行

serve

5、运行结果如下
在这里插入图片描述
6、在浏览器打开

在浏览器打开  http://localhost:3000/ 或者 http://10.172.5.76:3000/ 就可以看到打包的东西了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

--- ---

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue 打包优化以及项目打包本地预览

qq_17108919的博客

09-10

648

优化策略 1.生产打包报告 2.第三方库启用CDN 3.elment-ui组件按需加载 4.路由懒加载 5.首页内容定制一.插件babel-plugin-transform-remove-console：移除所有的console.log() //项目发布阶段需要用的babel插件 const prodPlugins = [] if (process.env.NODE_ENV === 'production') { prodPlugins.push('transform-remove-console'

vue 打包预览

新芽

07-07

172

【代码】vue 打包预览。

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

vue3项目打包生成dist文件夹后在本地怎么查看

最新发布

让技术为我所用

10-17

774

在本地查看打包后的dist文件夹最简单的方法是使用serve或，它们都能快速启动一个本地服务器，让你方便地预览打包后的项目。

vue打包本地预览

weixin_45849330的博客

06-25

403

vue打包本地预览

vue 打包后如何本地预览

yshijb的博客

04-11

1801

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

vue编译打包本地查看index文件的方法

08-27

在Vue.js开发过程中，我们经常需要将项目编译打包，以便于部署到生产环境或者预览本地构建结果。本文将详细介绍如何在Vue编译打包后，本地查看`index.html`文件，以及`/build/config/index.js`配置文件中的`...

vue项目打包后上传至GitHub并实现github-pages的预览

11-28

Vue.js项目打包后上传到GitHub并实现GitHub Pages预览是一个常见的流程，这使得开发者能够方便地分享和展示自己的作品。以下是一份详细的步骤指南，涵盖了从打包Vue项目到在GitHub Pages上预览的过程，以及解决可能...

Vue-cli打包后如何本地查看的操作

10-14

Vue CLI 是一个由 Vue.js 团队开发的命令行工具，用于快速搭建 Vue.js 应用的脚手架。...通过遵循上述步骤，开发者可以在本地环境中轻松预览和调试打包后的 Vue.js 应用，确保其在实际部署前的正常运行。

解决Vue-cli npm run build生产环境打包,本地不能打开的问题

10-17

通过以上步骤，我们就可以在本地成功预览Vue-cli项目在生产环境下的打包结果。这不仅有助于我们在将代码部署到生产环境前对打包结果进行检查，也能够帮助我们发现可能存在的问题，确保最终用户在生产环境下能够获得...

Vue打包预览项目

leng0920的博客

03-25

622

1、调出cmd窗口 2、npm run build //项目打包 3、npm install -g server //安装服务器 4、serve -s dist //-s的意思是将其架设在Single-Page Application模式下，这个模式会处理路由问题 5、复制路由在页面中打开 ...

vue项目打包上传github并制作预览链接（pages）

12-03

当Vue项目完成后，在根目录下打开命令行，输入命令： npm run build 实际上此命令就是执行build.js文件，将项目打包成静态资源。此命令完成后，项目根目录下会多出一个dist文件夹，dist文件里面有： static文件下包括项目打包后的css、js、img、fonts(字体图标)。项目资源无法加载点击index.html,浏览器显示该页面是空白的。打开控制台看到index.html文件中没有加载任何css、js文件。解决方法：打开项目根目录config下的index.js文件，进行如下修改：将 assetsPublicPath: ‘/‘ ,改为 assetsP

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

ccxh505398633的博客

08-01

4101

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

vue-cli本地预览打包文件

GreyCastle的博客

06-02

677

vue预览本地打包文件

vite+vue3 打包后本地预览（不需要起服务）

m0_50864962的博客

01-26

1419

打包本地预览,不需要起服务

vue项目打包后，本地预览和简单使用nginx反向代理

Tiny2017的博客

08-04

1161

使用vue cli3创建项目之后要打包部署，前端自己先预览时，可以试试本地预览和nginx代理 1.本地预览就是按照https://cli.vuejs.org/zh/config/ 官方文档说的，用nodejs静态文件服务器 npm install -g serve安装 serve -s dist 这里的dist是打包生成的文件名然后注意，运行的时候再执行打包命令好像不行，就先 ctrl + c 选择退出 2.nginx代理先下载nginx，然后进入nginx目录输入start nginx命令启

vue项目build 打包之后如何本地访问

qq_44776454的博客

06-18

1349

Vue项目构建后实现本地访问的方法

Vue-cli打包后如何本地查看

qq_36098938的博客

09-20

2339

Vue-cli打包后如何本地查看 Vue-cli打包成dist后默认是必须在http服务器环境下才能正常运行。可以在本地启动一个http-server服务查看，操作步骤如下：全局安装http-server：npm install -g http-server 进入dist根目录下cd dist 再输入指令：serve 输出serve: Running on port 5000,即服...

怎么在本地将Vue项目打包

05-15

在本地将Vue项目打包，可以执行以下步骤： 1. 首先，确保你已经安装了Node.js和npm。 2. 在项目的根目录下，打开终端或命令行窗口。 3. 执行以下命令安装依赖项： ``` npm install ``` 4. 执行以下命令进行...