vue 打包预览

已于 2024-03-19 14:04:04 修改
阅读量127 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2023-07-07 10:19:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhhhhhhhhtr/article/details/131591233
版权
  1. 安装本地服务器
    npm install -g express-generator
  2. 初始化文件夹
    express -e server
  3. 安装依赖
    npm install
  4. 打包后的 dist 文件下所有文件复制到 新建文件夹下 public下
  5. 运行 npm start
  6. 进行访问 localhost: 3000
--新芽-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
java在线浏览 github_vue项目实现github在线预览功能
weixin_31754073的博客
03-08 377
最近在使用 vue-cli 脚手架工具构建自己的第一个 vue 项目，有点小激动，想把它上传到这里假设你也是和我一样使用了 vue-cli 搭建了自己的项目，并且项目也已经上传到了 github问题1当我们在命令行执行 npm run build 后，项目的目录下会生成一个 dist 文件夹，它里面又包含一个 static 文件夹和一个 index.html 文件，这是 webpack 最终打包好...
vue打包 dist 文件预览自测
So.九天
07-06 715
vue vue3 打包 dist serve
Vue打包预览项目
leng0920的博客
03-25 598
1、调出cmd窗口 2、npm run build //项目打包 3、npm install -g server //安装服务器 4、serve -s dist //-s的意思是将其架设在Single-Page Application模式下，这个模式会处理路由问题 5、复制路由在页面中打开 ...
vue本地打包预览
最新发布
yf18040578780的博客
01-03 661
vue本地打包预览
Vue项目打包dist目录介绍
初心不改
06-08 2681
② .css.map文件是一个Source map文件，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。① .css文件是项目要用到的css文件,当你做webpack打包的时候，会把所有的css样式打包到这里。③ 其他.js文件是使用路由懒加载打包后的文件，按需导入路由，文件的名字是路由懒加载配置中的分组名称。① app.js：放的是项目中各个页面的逻辑代码，将格式进行了压缩。存放的是项目里的所有js文件，
经常忘记网址？将Vue项目一键打包为桌面客户端 十分钟让你解决烦恼
Designer 小郑的技术博客
12-06 4244
本文讲解了如何将一个Vue项目打包为桌面客户端，实现像Excel一样双击运行，适用于管理较多项目且经常忘记网址的场景。本文还讲解了 Vue 项目从下载依赖、打包和Nginx部署的全过程，可以给开发者参考学习。
vue项目打包后上传至GitHub并实现github-pages的预览
11-28
vue项目打包后上传至GitHub，并实现github-pages的预览 1. 打包vue 项目 vue项目： 命令行输入打包命令npm run build，生成了dist文件夹： 打包完成。 打包常见问题1——项目资源无法加载 打开刚刚打包好的dist...
vue项目实现github在线预览功能
08-27
Vue 项目实现 GitHub 在线预览功能 本文主要介绍了 Vue 项目实现 GitHub 在线预览功能，通过解决两个问题，带领大家一起学习整个过程。 问题 1：为什么页面显示为空白？ 当我们在命令行执行 `npm run build` 后，...
vue项目打包上传github并制作预览链接（pages）
10-17
主要介绍了vue项目打包上传github并制作预览链接（pages）的相关资料,需要的朋友可以参考下
Vue-cli打包后如何本地查看的操作
10-14
Vue CLI 是一个由 Vue.js 团队开发的命令行工具，用于快速搭建 Vue.js 应用的脚手架。...通过遵循上述步骤，开发者可以在本地环境中轻松预览和调试打包后的 Vue.js 应用，确保其在实际部署前的正常运行。
vue完成项目后,打包成静态文件的方法
10-18
今天小编就为大家分享一篇vue完成项目后,打包成静态文件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决Vue项目打包后文件过大问题
weixin_39964419的博客
10-11 1万+
首屏加载时间优化
VUE打包目录自定义
lpzwzpf的博客
05-23 5372
新接手VUE项目，因为项目需要，我们要按照之前的项目结构打包，VUE自动生成的打包目录结构不符合要求。 1.dist目录不能用，导致每次打包需要将dist文件夹重新命名，如果要修改打包后文件的目录，需要修改“config/index.js” 可以修改为： 这样在你的代码目录下生成一个package的文件夹，“package/XXX”就是打包生成后的文件内容。 2.默认的VUE打包生成后，只有一个index.html和static文件夹，但是往往因为我们项目的需要，要在static同级目录下放
vue项目打包后有哪些文件~详析
weixin_40079913的博客
12-15 6413
css文件夹下的.css文件是项目要用到的css文件,当你做webpack打包的时候，会把所有的css样式打包到这里 css文件夹下的.css.map文件是一个Source map文件，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。目的是帮助我们调试被压缩过的css代码，只是方便我们开发的时候做调试使用。 js文件夹下的.js.map依然是Source map文件，方便我们开发时调试js代码使用。 app.js文件里放的...
Vue-cli配置打包文件本地预览
ccxh505398633的博客
08-01 4044
Vue-cli配置打包文件本地使用 最近做的一个嵌入app的pc端项目，用的也是比较熟悉的vue-cli构建工具构建项目,需要的是打开dist文件夹入口html能加载到本地的静态文件，打包后的index.html加载文件如图： url中的路径据我们所知，最前面为一个反斜杠（/XX），表示从网站根目录开始搜索文件，如果需要相对当前文件夹则需以 ./或者不加反斜杠为路径开头，看来是打包后的...
vue系列之项目打包
02-22 490
vue完成项目后，如何打包成静态文件，并且用Node调试 打包 1、修改config里面的index.js里面的productionSourceMap为false,默认情况是true（true代表打包环境是开发环境，可以进行调试；false表示生产环境，正式上线的） 2.在cmd里面运行npm run build,(运行的是build里面的build.js文件) 生成的包放在di...
Vue项目打包后dist文件目录详解
热门推荐
A cold winter的博客
12-25 2万+
css文件夹下的.css文件是项目要用到的css文件,当你做webpack打包的时候，会把所有的css样式打包到这里 css文件夹下的.css.map文件是一个Source map文件，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。目的是帮助我们调试被压缩过的css代码，只是方便我们开发的时候做调试使用。 js文件夹下的.js...
vue打包之后静态资源访问不到
hellojol的专栏
03-26 8324
首先 确定问题描述：在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到（404错误），这些图片可以是以src引入的图片， 也可以是css中定义的背景图片。图片能否显示与你的静态资源文件存在位置和引入其次  查询问题解决方案：网上很多：基本上是 设置 build/utils.js 文件 30行左右BUG 。。郁闷来了 跟...
vscode将vue打包apk
09-05
要在VSCode中将Vue打包成APK，可以按照以下步骤进行操作： 1. 首先，确保你已经在VSCode中安装了必要的开发工具，如Node.js、npm以及Vue脚手架。可以参考引用中提供的资源来进行环境搭建和工程构建。 2. 在Vue项目的根目录下打开终端，运行以下命令将项目打包生成文件： ``` npm run build ``` 3. 打包完成后，会在项目的`dist`文件夹下生成打包后的文件。这些文件包含了应用的所有静态资源。 4. 接下来，将`dist`文件夹下的所有文件复制到你的App项目中。这个App项目可以是你自己创建的用于承载Vue应用的原生项目，可以参考引用的指引来进行操作。 5. 最后，你可以使用云打包服务将你的App项目打包成APK文件，以便在安卓设备上进行安装和使用。 需要注意的是，运行Vue应用时，可以直接在浏览器中打开`index.html`来查看效果。但如果使用VSCode进行开发，你可能需要安装相应的插件以便预览Vue应用。这一点可以参考引用[3]中的提醒。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue开发从零到发布集成apk史上完整版.docx](https://download.csdn.net/download/bswsf/12415328)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue项目打包成app安装包/vue打包教程](https://blog.csdn.net/yuan_1216/article/details/125059214)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值