vue项目中直接在前台打包看效果

最新推荐文章于 2024-05-07 01:55:02 发布
最新推荐文章于 2024-05-07 01:55:02 发布
阅读量1k 收藏
点赞数
分类专栏： vue 打包 文章标签： vue 打包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42580704/article/details/83054743
版权
vue 同时被 2 个专栏收录
13 篇文章 0 订阅
订阅专栏
打包
1 篇文章 0 订阅
订阅专栏

1.npm install -g serve
2. npm run build 打包
3. serve dist
4.然后会出现下面的绿色方框，在地址栏输入下面的地址就可以了

weixin_42580704
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端打包zip
11-12
前端用于打包文件和图片的JS插件，用前端打包文件可以减轻服务器端的压力，免去服务器端生成压缩包，再下载，后删除的繁琐过程和服务器压力
前端项目的打包发布
weixin_53945110的博客
06-16 1万+
命令: npm run build 作用：用vue-cli内部集成的webpack，把 .vue, .less, .js 等打包成浏览器可直接执行的代码。
2024年前端最新vue项目如何打包以及如何变成android、ios应用程序，前端简历项目经验
最新发布
2401_84433570的博客
05-07 830
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
Vue前端项目运行指南(v1)
软件攻城狮
05-25 464
Vue前端项目运行指南(v1) 运行指南 1、安装nodejs 访问 https://nodejs.org/en/ 下载稳定版 1.1 打开控制台 输入 node -v 查看node的版本，若出现相应的版本号说明你安装成功了 1.2 npm包管理器，是集成在node中的，所以安装了node也就有了npm,直接输入 npm -v 命令，显示npm的版本信息。 2、 设置npm 来源为 淘宝 不要用cnpm 控制台输入命令 npm config set regi...
前端Vue项目打包性能优化方案
m0_51637686的博客
06-25 7856
文章目录一.前言二.优化方案1丶路由懒加载（代码分割）2丶第三方插件按需加载 一.前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue 项目性能方面的优化，使项目具有更高效的性能、更好的用户体验。 二.优化方案 以下将从5个方面来说明vue项目的优化解决方案 1丶路由懒加载（代码分
Vue项目打包部署总结
程序员成长指北
12-10 9439
关注程序员成长指北，回复“1”加入我们一起学习，天天进步来源 |https://wintc.top/article/29使用Vue做前后端分离项目时，通常前端是单独部署，用户访问的也...
Vue 2.0在IE11中打开项目页面空白的问题解决
08-29
主要给大家介绍了关于Vue 2.0在ie 11中打开项目页面空白问题的解决方法，文中详细分析出现该问题的原因，并给出了详细的解决方法，需要的朋友可以参考借鉴，下面跟着小编来一起学习学习吧。
Vue前端项目部署IIS的实现
10-15
主要介绍了Vue前端项目部署IIS的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一个页面秒开的Vue项目示例源码
04-12
这是一个页面秒开的移动端Vue项目示例，集成了 Vant UI，flex布局，页面自适应方案，打包文件优化还有动态加载JS文件(如jQuery)等实用的封装。开箱即用！ 资源详情说明：...
基于Vue3+ElementPlus+Pinia+Vite+Axios的智慧社区前台管理界面源码+项目说明.zip
04-10
基于Vue3+ElementPlus+Pinia+Vite+Axios的智慧社区前台管理界面源码+项目说明.zip ## 介绍 - 基于 Vue3、TypeScript、Element Plus、Vue Router、Pinia、Axios、Vite 等开发的后台管理系统模版 ## 安装 注意：需...
浅谈Vue 自动化部署打包上线
11-20
项目打包后发布到正式环境，需要后端配合或者前端自己上传到服务器上，操作不便且容易产生问题，比如后台不在的情况而前台没有服务器的信息，这时发布就被延；或者前端自己上传容易导致误操作，如果上传错地方没正确...
Web前端常用的特效打包
08-10
花钱买的，要10分一点都不过分，值不值你用了就知道，我也是做前台的，我天天用的特效都在这里面找的。
vue项目打包步骤
热门推荐
从零出发
06-25 31万+
vue项目打包终端运行命令 npm run build打包成功的标志与项目的改变，如下图：点击index.html，通过浏览器运行，出现以下报错，如图：那么应该如下修改呢？具体步骤如下：1、查看package.js文件的scripts命令2、打开webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl点击，跳转到in...
vue-cli构建项目 npm run build打包后怎么在本地查看效果
u013400682的博客
08-09 1万+
点击查看原文 本文以vue官方脚手架vue-cli构建的项目为例。 运行npm run dev以开发模式打开调试好了你的案例程序；你还不满足于仅仅把代码放在github上，想把项目打包，然后在本地预览或者放在个人博客上供大家直接看效果学习。这时如果直接运行npn run build是可以运行并打包你的代码的，不会报任何异常或错误，但是会看到打包完成有这样一句提示：看到这里第一感觉：不是警告色，应
普通项目前端打包步骤
qq_43469899的博客
11-04 6700
1.在编译器内执行 npm run build 2.将打包的文件放到服务器对应的文件夹上去 3.找到对应文件夹的相对应的nginx进程给结束掉 4.修改config.js的基础路径改成远程的ip的路径 5.重启nginx ...
vue项目打包后文件本地看效果
weixin_44634366的博客
04-30 1024
1.安装tomcat 直接打开软件商店下载一个就okay了，方便又超级好用，如下图 点击start service 开始服务； 点击stop service 结束服务； tomcat的conf的server.xml文件中默认的端口配置是8080； 开启服务时，可以在浏览器中输入链接http://localhost:8080看默认效果 替换 tomcat的webapps\ROOT目录下文件即为...
前台常用封装（一）
weixin_30408739的博客
09-24 115
开发web项目时，经常会使用到的页面脚本语言javascript，使用它能让页面展示上的效果更多彩。 今天就来说一下，从数据库中获取到数据后在页面上的展示方式： 1.数据库取出数据放入list<object>,将其使用jsonobject封装成json串： 　　<select id="selectAll" resultMap="BaseResultMap...
vue前端项目运行步骤
南方五宿放眼观,犹如潇湘黛未施
06-19 1520
mysql installer 5.7.28 node.js 1.安装node.js 先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具来实现. node版本号 node -v 2：安装淘宝npm镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 3：安装vue-cli cnpm install --global vue-cli # 1 //出错时可选 npm cache clean --for
教你如何运行vue项目
weixin_42138420的博客
06-16 1374
1、如何运行项目 首先定位到项目名路径（输入cd 项目名称） 2、定位好项目路径后再npm run dev 就好了，这样就可以在浏览器打开了。
在已有的vue项目中的给electron应用打包
07-28
对于给已有的 Vue 项目打包成 Electron 应用，你可以按照以下步骤进行操作： 1. 首先，确保你的 Vue 项目已经能够正常运行并且已经安装了 Electron 相关依赖。 2. 在项目根目录下创建一个 `main.js` 文件，这将是 Electron 应用的入口文件。在该文件中，你需要创建一个 Electron 应用窗口并加载 Vue 项目的打包文件。 ```javascript const { app, BrowserWindow } = require('electron'); function createWindow() { // 创建浏览器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }); // 加载 Vue 项目的打包文件 win.loadURL(`file://${__dirname}/dist/index.html`); } app.whenReady().then(() => { createWindow(); app.on('activate', function () { if (BrowserWindow.getAllWindows().length === 0) createWindow(); }); }); app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit(); }); ``` 3. 接下来，在 `package.json` 文件中添加一个 `start` 命令，用于启动 Electron 应用。 ```json { "scripts": { "start": "electron ." } } ``` 4. 然后，运行 `npm start` 命令启动 Electron 应用，确保应用能够正常运行。 5. 最后，使用 Electron 打包工具将整个项目打包成可执行文件。常用的打包工具有 `electron-packager` 和 `electron-builder`，你可以根据自己的需求选择其中一个进行使用。 例如，使用 `electron-builder` 进行打包，首先安装该工具： ```bash npm install electron-builder --save-dev ``` 然后在 `package.json` 文件中添加以下配置： ```json { "build": { "appId": "com.example.myapp", "productName": "MyApp", "directories": { "output": "dist" }, "files": [ "dist/**/*", "main.js" ], "mac": { "target": "dmg" }, "win": { "target": "nsis" } } } ``` 最后，运行以下命令进行打包： ```bash npm run build ``` 打包完成后，你会在 `dist` 目录下找到相应的可执行文件和安装包。 希望这些步骤能帮助到你！如有其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值