Vue打包过程

最新推荐文章于 2024-05-11 00:59:19 发布
最新推荐文章于 2024-05-11 00:59:19 发布
阅读量1.1k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sugang666/article/details/90081056
版权 
Vue过程控制系统打包过程(React大同小异,只不过生成的是build文件)
1.修改网络接口地址(发布版)
2.npm run build生成dist文件
3.在dist文件目录下
	1>重命名index.html为gckz.html
    2>重命名static文件夹为gckz
	3>进入gckz目录打开css和js文件夹,删除后缀是map的文件,(可以理解为删除缓存)
	4>打开gckz.html修改路径
		(1).把css,js代码的引入路径的./static重命名为./gckz 
		(2)打开css目录下的css文件,在代码里找到font(字体)的把路径/static重命名为./gckz 
* 注意:  ./ 是相对与当前文件的路径; /是相对与域名的路径
4.把gckz.html和gckz文件夹放到域名根目录径下
5.打开浏览器,访问url,然后查看NetWork里面js和css和字体文件是否成功加载.(没有报红色证明成功了)

 

Xiao苏同学
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue项目打包步骤详细流程，新手必需掌握的知识点！
weixin_46709512的博客
02-11 8396
Vue项目打包步骤Vue项目打包流程介绍生成打包报告修改默认配置指定打包入口通过external加载外部CDN资源优化组件库的打包首页内容定制路由懒加载 Vue项目打包流程介绍 新手必须要懂的 Vue项目打包 ， 生成打包报告 为能更加清楚直观的发现我们项目中存在的问题，我们可以在打包时生成一份打包报告，打包报告生成的方式有两种： 通过命令生成 通过vue-cli的命令可以生成打包报告 report.html vue-cli-service build --report 通过可视化控制面板直接查
vue项目打包流程
weixin_45645412的博客
01-09 1万+
vue项目打包流程 二、打包优化 1.首先在根目录下面创建一个vue.config.js文件 2.去除.map文件，在vue.config.js文件里面抛出一个对象，然后把下面两段代码写到对象里面，然后在控制台或者终端通过npm run build命令，打包项目 注：如果一次不行，就在执行一次 module.exports = {}//在vue.config.js文件里面抛出一个对象 publicPath: "./", productionSourceMap: false, //不输出map文件 3
2024年vue项目如何打包以及如何变成android、ios应用程序(1)，今日头条前端社招面试
最新发布
2301_76278747的博客
05-11 826
为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】2. webpack配置在中，我们就可以写很多webpack配置，常用的有: 配置端口号，配置跨域服务器代理等。我们需要的主要是配置一个打包的目录publicPath,否则打包出来的apk文件，安装在安卓手机上，可能出现白屏，具体配置如下:publicPath: “./”,// 需要配置 否则打包后的apk文件安装在手机可能白屏。
手把手教你如何把vue项目打包后部署到服务器（小白教程）
Orange71234的博客
06-21 1万+
（5）输入用户名密码登录出现如下页面 ，点击左侧网站-->添加站点-->输入域名-->根目录地址会 自动生成-->点击提交-->站点创建成功。1.vscode打开你的vue项目-- >点终端 -- >输入npm run build 按回车进行打包；3.下载安装好软件后双击打开，选择SSH连接，填写如下信息，最后点击确定。（7）点击上传，按照下图方式上传之前打包好的dist文件夹下的内容，(2)查看服务器是否安装宝塔，如安装则出现宝塔面板命令，(3)输入14，查看并复制外网面板地址以及用户名，密码。
Vue项目分包打包配置（包含dev)全过程
weixin_41884808的博客
03-24 4417
Vue项目手把手教你如何分包
Vue基础知识总结 9：vue webpack打包原理
学Java，找哪吒
10-06 2万+
???? Java学习路线：搬砖工逆袭Java架构师 ???? 简介：Java领域优质创作者????、CSDN哪吒公众号作者✌ 、Java架构师奋斗者???? ???? 扫描主页左侧二维码，加入群聊，一起学习、一起进步 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 一、前端模块化 webpack是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系。 并且不仅仅是JavaScript文件，还有CSS、图片、json文件等等，在webpack中都可以被当做模块来使用。 二、打
springboot如何使用vue打包过的页面资源
08-25
概括来说，本文主要介绍了 Spring Boot 如何使用 Vue 打包过的页面资源，通过示例代码详细介绍了整个过程。下面是对该主题的详细解释： 一、Webpack 打包 在使用 Vue 基于 Webpack 的时候，build 打包后得到的是...
解决Vue打包后访问图片/图标不显示的问题
10-16
首先，我们需要理解Vue打包过程中资源处理的基本原理。在开发模式下，Vue CLI会自动处理静态资源，如图片和图标，通过`require`或`import`语句引入。但在生产环境下，Vue CLI会将这些资源移动到一个公共目录，并且会...
electron-vue 打包所需文件
03-23
** electron-vue 打包过程中的常见问题及解决方案 ** 1. **依赖版本不兼容**：确保项目中的所有依赖（包括 Vue、Electron、Node.js 等）与 electron-builder 兼容。更新到最新稳定版或回退到已知兼容版本可能解决...
Electron + vue 打包桌面操作流程详解
10-16
在打包过程中可能会遇到一些坑，比如需要将`build`目录下的`electron.js`复制到`dist`目录，并更新`dist`目录中的`package.json`。执行`npm run go`后，你会在生成的文件夹中找到打包好的应用。 8. **总结** 集成...
详解vue项目的构建，打包，发布全过程
10-18
小编给大家通过本文详细介绍了关于vue.js项目的构建、打包、发布的全过程，文章很以后价值，值得你参考。
Vue项目打包并发布的完整步骤记录
weixin_59127121的博客
09-19 1860
如何将Vue项目打包并发布？
Vue3源码分析之打包原理
zhanghuaiwei
05-07 1160
Vue3源码分析之打包原理 如果之前你已经看过我的《Vue3源码分析之入门》，那么你可以直接阅读此篇文章 Vue3源码分析之入门 一、配置环境 1. 全局安装yarn Monorepo 管理项目中多个包是依赖yarn的 $ npm install yarn -g 2. 初始化项目 新建文件夹，如：mycore，进入新建的文件夹，并运行如下命令，进行项目初始化，生成package.json文件 $ yarn init -y 3. 配置项目的package.json { "private
vue打包的详细步骤记录
玫瑰与鹿°
04-19 7751
任务 要对积分项目的pc端进行打包。 平时我们可以在Jenkins上配置，然后启动，让其自动打包。但是这次Jenkins上打包出错了，所以想手动打包，测验一下是哪的问题。 详细步骤 （1）打开config下的index.js文件，修改assetsPublicPath的值，从‘/’改为‘./’。即从根路径改为相对路径。否则出现不了页面，出现的是一页空白。 （2）打开build下的utils.js文...
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 打包发布流程
子敬的技术博客
05-16 1万+
Vue 打包发布流程 配置打包文件路径 在vue.config.js中设置 module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/ynnt/' : '/' } 这里的ynnt就是我们基地址的路径。 执行打包命令 通过命令npm run build执行打包，最终在根目录下会生...
vue脚手架中webpack的打包原理，vue脚手架的webpack是如何打包的?
jiang7701037的博客
03-08 1万+
vue脚手架写完代码后，要打包部署（打包）到web服务器上。 1、运行命令 npm run build。就完了，一步搞定。 下面说一下vue脚手架中webpack的打包原理： 1、针对静态资源： 很多人会把静态资源一部分存放在src/assets目录下，一部分存放在static目录下，我建议所有的静态资源都存放在src/assets下。 在w...
使用vue-cli打包过程中的步骤以及问题
martsforever的博客
12-21 1万+
1、打包命令是npm run build，这个命令实际上是在package.json中，scripts中build所对应的命令； 2、创建一个prod.server.js，这个文件不是必须的，这个文件的用处是在打包完毕之后，通过启动node.js本地服务来访问打包完成的静态文件，不需要的同学可以忽略这一点， prod.server.js文件代码示例： let express...
vue打包electron
09-03
5. 如果在electron-vue打包过程中遇到问题，您可以尝试将位于`C:\Users***\AppData\Local\electron-builder`下的Cache文件替换为本地文件。 希望这些步骤对您有帮助！<span class="em">1</span><span class="em">2...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值