Vue3项目打包

最新推荐文章于 2024-05-27 09:15:17 发布
最新推荐文章于 2024-05-27 09:15:17 发布
阅读量3.8k 收藏 4
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35090060/article/details/127289680
版权

两种方式

build指令

cnpm run build

通过Vue CLI打包

在Vue CLI中点击任务->build->启动
等待打包成功即可

使用打包好的文件

打包生成的文件会默认导出到项目根目录下的dist目录下
该目录下包括css文件夹、js文件夹、index.html、xxx.ico
但是此时打开index.html是空的，要想看到内容需要将index.html中所有引入文件的路径改为相对路径
参考菜鸟驿站-Vue3项目打包

waiting&fighting
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3 打包：优化与部署
lsx202406的博客
06-16 826
Vue.js 是目前最流行的前端框架之一，以其轻量级、高性能和易用性著称。Vue3 是 Vue.js 的最新版本，带来了许多新特性和性能改进。在开发 Vue3 应用程序时，打包是一个关键步骤，它涉及到将源代码转换成可在浏览器中运行的代码。本文将详细介绍 Vue3 打包的过程，包括优化技巧和部署策略。
VUE3 项目打包
weixin_41276201的博客
04-18 467
【代码】VUE3 项目打包。
vue3项目打包和上线
kanno的博客
02-08 4762
vue3项目打包和上线，以及打包上线遇到的问题
Vue3之vite打包优化
qq_43225508的博客
06-26 6410
Vue3之vite打包优化
vue3的webpack配置
weixin_52663662的博客
11-27 1843
1、首先导入对应的4个配置插件 npm install webpack@5.0 --save-dev npm install webpackbar -D npm i terser-webpack-plugin@5.0.2 -D npm i compression-webpack-plugin@5.0.1 -D 2、在vue.config.js的配置 const { defineConfig } = require("@vue/cli-service"); var path = req
vue3+ts项目中router+pinia+scss+unocss+跨域配置
最新发布
我愿化作繁星
05-27 1048
❗️❗️❗️❗️本文是根据B站作者视频以及稍作整理💖💖作者B站地址💖💖视频教程地址💖💖作者微信：专注前端技术分享,技术讨论加。
vue3项目打包
leveretz的博客
11-11 1196
vue3项目打包
Vue3 + Vite 打包发布至 npm 流程
wxid_mtnujb6ipc0322的博客
11-02 3992
随着 Vue.js 3.0 的正式发布，Vue 生态系统也进入了一个新的阶段。在 Vue.js 3.0 中，Vite 成为了默认的开发工具，并替代了 Vue CLI 作为推荐的构建工具。同时，NPM 作为 JavaScript 包管理器，对于开发者来说也是一个必备的工具。那么本文将介绍如何使用 Vue3、Vite 和 NPM 打包并发布一个 Vue 组件。
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
10-15
本文将详细介绍如何解决Vue3项目打包后部署到服务器请求不到后台接口的问题。 首先，我们要理解问题的根本原因。在本地开发时，我们通常会使用Vue CLI的`vue.config.js`配置文件中的`devServer.proxy`选项来设置...
vue移动端项目打包成app
01-08
首先项目开发完之后 （我使用的是vue-cli 3.*版本） 在项目文件夹下创建一个 vue.config.js module.exports = {  publicPath: “./”, // 打包 配置这个可以先本地查看下 效果  productionSourceMap: ...
Vue项目打包编译优化方案
10-14
Vue 项目打包编译优化方案是为了提升项目的性能和加载速度，尤其对于大型或者复杂的 Vue 应用来说，优化显得尤为重要。以下是一些关键的优化措施： 1. **不生成.map文件**： .map 文件主要用于在开发环境中进行...
Springboot项目与vue项目整合打包的实现方式
08-25
Springboot项目与Vue项目整合打包的实现方式 在现代软件开发中，前端和后端项目的分离开发和集成是非常常见的。在这种情况下，我们需要在开发时将前端和后端项目分离，以便于更好地维护和更新代码。但是，在部署时...
小白Vue3+Nginx实现部署
Sumuxi9797926的博客
12-09 9107
记录一下自己想搭建一个自己的个人网站的心路历程，其实我刚开始的落脚点是找一个别人的半成品或者成品，再慢慢的改，想把主要的精力放在后台上面，找了很多网站之后，例如,，不是项目很久没有维护了，就是好看的没有适合我的🙃（怪我，太菜了~傻狗哽咽🐮🐴），最后还是决定用vue3自己从0开始学，开始搭建。
.net6+Vue3前后端分离 项目Docke容器化打包部署
Ryangfeng
10-26 470
.net6+Vue3前后端分离 项目Docker容器化打包部署
Vue3.0 项目打包，启动
早日成为鹏总
03-25 5471
1.打包 1.使用 vue ui打包（选择任务-选择build-选择运行） 2.使用命令打包（vite build），本项目使用vite进行打包 2.生成打包文件 1.项目中会出现一个dist文件 3.新建承载服务器 1. 进入D盘，安装express-generator生成器 执行 npm install express-generator -g 进行安装 2. 创建一个express项目 执行 express expressDemo （expres...
vue3 项目打包
raphero
04-23 3300
命令 npm run build 直接打包可能会访问报错 We’re sorry but qnjms doesn’t work properly without JavaScript enabled. Please enable it to continue. 需要进行配置 打开vue.config.js，加入publicPath配置 const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ t
【vite+vue3】一个项目包含多个小项目并实现多项目单独打包部署访问
q1ngqingsky的博客
04-06 6037
1. projectA项目和projectB项目中均要保留index.html、main.ts/js 、App.vue 这三个文件可以直接复制粘贴src下的index.html、main.ts/js 、App.vue文件内容，需要注意的是main.ts路径引入的变化,以及路由的路径引入正确与否。公司有两个项目，UI界面以及框架是一致的，且有很多个公用的组件可以共同使用。所以想着在一个大的项目里实现两个小项目：projectA和projectB项目，公共部分提取出来。3. 配置package.json。
vue3项目打包后，将dist文件在本地运行
weixin_66582617的博客
03-05 1374
vue3项目开发好后，打包完成，想在本地运行测试打包文件可以通过http-server来启动。2、打包完成后，进入dist打包文件。4、启动dist文件，并指定端口。3、安装http-server。
打造飞一样的前端：vue3应用打包优化
曲折旅程，艰难人生
12-22 1610
前端vite构建技术和打包优化
vue3项目打包白屏
08-05
在将Vue3项目打包后出现白屏的情况下，可以尝试以下解决方法。首先，通过F12开发者工具查看控制台是否存在404错误。如果存在404错误，可以将资源访问路径配置为正确的路径，以解决404问题。中的信息提示，检查index....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值