vue项目打包

已于 2022-03-24 14:15:40 修改
阅读量610 收藏
点赞数
文章标签： vue
于 2022-03-23 00:22:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59579040/article/details/123674998
版权

vue打包

npm run build

在这里插入图片描述

打包成功显示

vue项目打包出来的文件夹dist

如果您想在本地开服务器运行dist 可以用以下操作：

  1. 安装http容器（这里用http-server）
  2. 安装http-server
npm install http-server -g

  1. 进入cd dist

  2. 启动 http-server服务

http-server
  1. 访问localhost:8080即可
    在这里插入图片描述

关闭http-server服务

ctr+C
ctr+C
cd…重新 npm run build

打包注意事项

webpack打包

vite打包

ravi++
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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项目打包布署
m0_67403013的博客
06-18 4592
我们使用Vue做项目时，基本都是前后端分离的，所以项目布署有时是前后单独部署。因此前端开发人员很有必要熟悉一下项目部署的流程。Vue项目打包部署本身不复杂，不过一些前端同学可能对服务器接触不多，部署过程中还是会遇到这样那样的问题。本文介绍一下使用nginx服务器代理前端项目的方法以及项目部署的相关问题。一般我们在布署时，服务器已经开通好了，我们进入服务器配置就好了。一般而言，nginx后端会安装好。我们在此熟悉一下安装过程 启动后，正常情况下，直接访问`http://服务器ip`或`http://域名`。如
VUE项目打包部署后刷新浏览器不是最新代码
CharisJIM的博客
06-02 3209
VUE项目打包部署后刷新浏览器不是最新代码
Vue项目打包文件放在服务器后，浏览器存在缓存问题的解决方案
那一日面朝大海的博客
09-17 5028
每次测试构建或者打包更新版本发到服务器上，导致偶尔会出现不能及时更新到最新代码，浏览器存在缓存的问题。 解决方法一： vue-cli2.x或者webpack初始化的项目找到webpack .prod.conf.js ，vue-cli3.0 的找到配置文件vue.webpack.js 1.定义版本变量： const Version = new Date().getTime(); // 这里使用的是时间戳 来区分 output: { path: config.build.assets...
vue 项目通过 npm run build 打包以后页面找不到内容
Blue__Summer的博客
03-20 4536
顾名思义这是一个路径问题！！！！！ 当项目build后打开dist/index.html你会发现页面什么都没有（空白页），查看页面console 惊奇的发现一片红 更改点一： 此时你需要查看你的配置文件webpack.config.js(vue.config.js) 是否配置了publicPath:'./', module.exports = { publicPath: './', // 执行 npm run build 统一配置路径 } 再次打包index.html 就..
vue2项目打包遇到的问题（记录）
weixin_43939111的博客
07-19 1062
临时纯手工搭建开发了个vue2小项目，打包后出现了很多问题。
Vue项目打包上线部署的那些坑
qq_37942845的博客
09-25 839
1、跨域问题 开发环境的跨域可以直接在vue cofig中设置，这个没啥说的，打包完成后就一点关系都没了 解决方案： a.通过jsonp跨域 b.通过修改document.domain来进行跨域 c.使用window.name跨域 d.使用HTML5中新引进的window.postMessage方法来跨域传送数据 e.CORS 最好的解决办法我觉得还是后端给设置响应头解决跨域 2、打包完的版本问题 如果你用的npm、或者cnpm，打完包，再上线，过半年，重新install...
Vue项目打包部署
热门推荐
qq_40259528的博客
07-20 2万+
vue项目部署，使用的是linux centors nginx.遇见的问题及解决方案
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
Vue项目打包部署总结
2301_79098873的博客
05-15 1926
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
vue项目打包之后背景样式丢失的解决方案
10-17
总结一下，Vue项目打包后背景样式丢失的问题主要源于Vue CLI的图片处理策略和生产环境的路径问题。通过在`build/utils.js`中添加适当的配置，我们可以有效地解决这个问题。此外，理解这个过程也有助于我们在其他类似...
Vue项目打包编译优化方案
10-14
Vue 项目打包编译优化方案是为了提升项目的性能和加载速度，尤其对于大型或者复杂的 Vue 应用来说，优化显得尤为重要。以下是一些关键的优化措施： 1. **不生成.map文件**： .map 文件主要用于在开发环境中进行...
解决Vue 项目打包后favicon无法正常显示的问题
12-07
通过以上步骤，通常可以解决Vue项目打包后favicon无法正常显示的问题。需要注意的是，这种方法适用于使用webpack进行构建的Vue项目，其他构建工具可能需要不同的配置策略。同时，对于开发环境，可以考虑使用热更新...
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
08-27
主要介绍了vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀的相关知识，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
解决vue项目打包上服务器显示404错误,本地没出错的问题
01-22
1、使用脚手架搭建一个vue项目 2、运行，在本地运行没问题，接着打包上服务器，遇到404的错误，如下 这是webpack打包的结果，解决办法如下 1、修改build文件夹下的utils.js文件，大约在51行添加 publicPath:../../...
基于微信小程序的在线学习系统设计与实现.docx
08-29
基于微信小程序的在线学习系统设计与实现.docx
mayaABC文件建模李小龙动作B
08-29
mayaABC文件建模李小龙动作A，一整套的建模abc数据有动作
微专题 新情景条件下氧化还原反应方程式的书写 (1).pdf
最新发布
08-29
微专题 新情景条件下氧化还原反应方程式的书写 (1).pdf
vue项目打包 webpack
05-25
Vue.js 是一个前端框架，它使用 Webpack 作为默认的构建工具，可以将你的项目打包成一个发布的文件。 以下是打包 Vue 项目的基本步骤： 1. 安装依赖 使用 npm 或者 yarn 安装项目依赖，包括 Vue.js 和 webpack ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值