Vue3项目打包

最新推荐文章于 2025-04-20 21:27:09 发布
原创 最新推荐文章于 2025-04-20 21:27:09 发布
· 4.2k 阅读 · 4 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

本文介绍Vue项目的打包流程，包括使用build指令或cnpmrunbuild进行打包的方法。通过VueCLI完成打包后，生成的文件位于项目根目录下的dist文件夹内，包含css、js文件夹及index.html等。为使index.html正常显示内容，需调整引入文件的路径。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

两种方式

build指令

cnpm run build

通过Vue CLI打包

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

使用打包好的文件

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

vue3 - vite打包报错error during build: “default“ is not exported by “x”, imported by “x“（解决前端vue3打包时出错）
高级前端工程师
04-12 8509
vue3，vite，打包编译，打包构建，报错，前端vue打包时遇到‘default‘ is not exported by node_modules/vue/dist/vue.runtime.esm-bundler.js, imported by，vite打包报错“default“ is not exported by “node_modules，vue3项目打包报错，vite项目打包报错，执行npm run build报错，解决vite打包出现，rollup打包报错，如何解决这个问题，依旧报错，无法构建编
Vue3项目打包优化
valsedefleurs的博客
07-05 1080
Vue3项目打包优化
从零打造一个Vue 3组件库：开发、打包与发布到NPM
最新发布
qq_30110433的博客
04-20 1478
想开发一个属于自己的Vue 3组件库，却不知从何入手？本文带你一步步从零开始，基于Vue 3和Vite，打造一个简单的UI组件库（以按钮组件为例），并实现打包、测试与发布到NPM的全流程。涵盖组件开发、TypeScript支持、样式提取、按需加载配置及本地npm link测试，配有详细代码和踩坑经验。无论你是Vue进阶开发者还是想为社区贡献代码，这篇实战教程都能帮你快速上手！
VUE3 项目打包
weixin_41276201的博客
04-18 534
【代码】VUE3 项目打包。
Vue3 项目打包
weixin_45422672的博客
02-06 1018
在 Vue 3 项目中，打包是一个重要的步骤，用于将开发环境中的代码转换为生产环境可用的优化代码。
vue3项目打包和上线
kanno的博客
02-08 5333
vue3项目打包和上线，以及打包上线遇到的问题
vue3 快速入门 (七) : Vue打包并部署到Nginx服务器上
朱豪凯的博客
08-11 5206
介绍vue3中怎么打包，并部署到Nginx服务器上
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
10-15
本文将详细介绍如何解决Vue3项目打包后部署到服务器请求不到后台接口的问题。 首先，我们要理解问题的根本原因。在本地开发时，我们通常会使用Vue CLI的`vue.config.js`配置文件中的`devServer.proxy`选项来设置...
electron+vue3项目打包成exe文件
weixin_56388890的博客
08-10 500
electron+vue3项目打包成exe文件，__dirname路径有错解决
将 vue3 项目打包后部署在 springboot 项目运行
m0_74825502的博客
01-24 955
服务端需要增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个index.html页面，这个页面就是你 app 依赖的页面。检查前端的 vue-router 使用历史模式还是哈希模式，历史模式（HTML5 模式）需要后端额外配置，配置参考上文。在 vite.config.js（.ts） 设置开发或生产环境服务的公共基础路径（base配置项），这里不使用相对路径。检查 index.html ，查看 script 和 link 标签的地址，应该是绝对路径（不含./）
vite3+vue3 项目打包优化
前端知识分享喵
05-16 2678
现在很多小伙伴都已经使用 Vite + Vue3 开发项目了，如果你是 “前端架构师” 或者是 “团队核心” 的话，不得不可考虑的一个问题就是性能优化。本篇文章主要讲述的是生产环境下 Vite + Vue3 打包优化。
一文揭秘Vue3组件库的优雅打包与细节
程序员成长指北
10-18 752
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群千呼万唤始出来干货满满的组件库打包分享！这次，我终于要给大家带来关于组件库的工程化打包升级与细节的文章啦。回顾组件库的搭建，已经是很久以前了，目前组件库也发展到一个瓶颈期需要升级架构和打包了...我认为，前端工程化更像是个命题作文，没有标准答案，能解决问题即可。所以，本文旨在以我解决问题的实战经过...
Vue3 学习笔记（三）Vue3 项目打包及目录结构说明
w风雨无阻w的专栏
10-23 2461
该目录一般包含 index.html 文件及 assets 目录，assets 目录包含了静态文件 js、css 以及图片目录 images（如果有图片的话）。当我们准备将应用发布到生产环境时，就需要打包 Vue 项目。执行完成后，会在 Vue 项目下会生成一个。
vue3 项目打包
raphero
04-23 3389
命令 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
如何通过 Vue CLI 打包 Vue3 项目？
网络技术联盟站
07-17 1595
通过本文的介绍，您应该已经了解了如何通过 Vue CLI 打包 Vue3 项目。请记住，打包是部署 Vue3 项目到生产环境的必要步骤，并且您可以通过优化打包结果来提高项目的性能和加载速度。
Vue3 打包：优化与部署
wjs2024的博客
07-28 587
Vue3 打包是一个涉及多个方面的复杂过程，但通过合理的配置和优化。
vue cli3 项目打包
wxina
05-31 313
新建 vue.config.js 文件 // 在这里配置 module.exports = { // 基本路径 publicPath:"./", // 输出文件目录 outputDir: 'dist', // webpack-dev-server 相关配置 devServer: { // port: 8888, // ... }, } 在 router.js 里 //把mode写成hash模式 mode: 'hash'
vue3项目打包
03-10
### Vue3 项目打包方法教程 #### 创建 Vue3 项目 为了开始打包过程，首先需要有一个完整的 Vue3 项目。如果还没有创建过这样的项目，则可以通过 Vue CLI 或者 Vite 来快速搭建。 #### 配置 `vue.config.js` 文件 对于一些特定需求，比如代理设置或是调整输出路径等配置项，可以在根目录下的 `vue.config.js` 中定义。例如，在某些情况下可能希望修改默认的公共路径 (`publicPath`) 和资源文件夹名称(`assetsDir`)： ```javascript const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ publicPath: './', assetsDir: 'static' }) ``` 此部分配置可以确保生成的静态资源能够被正确加载[^4]。 #### 构建命令执行 当所有的源码编写完毕并经过充分测试之后就可以准备进行正式环境版本的构建了。进入项目的终端界面输入如下指令来进行生产模式下的编译操作： ```bash npm run build ``` 这条命令会读取 package.json 文件中的脚本字段，并调用 vue-cli-service 的内置工具完成整个应用的优化处理以及压缩等工作流程[^1]。 #### 查看打包结果 一旦上述命令顺利结束运行后，默认会在当前工程结构体内部新增一个名为 dist 的子级文件夹；这里面包含了所有用于线上发布的 HTML/CSS/JS 资源文档。此时即可着手安排把这些资料上传至目标主机之上以便对外提供服务支持。 #### 解决常见问题 有时可能会遇到打包后的页面无法正常请求到 API 接口的情况。这通常是因为跨域或者是相对 URL 设置不当所引起的错误。针对此类状况建议检查网络请求地址是否匹配实际的服务端点位置，并确认 CORS 政策允许来自前端域名的访问尝试[^2]。 #### 后端集成方案 如果是全栈式的应用程序，除了关注客户端部分之外还需要考虑怎样把后端逻辑也一并部署出去。一种常见的做法就是利用像 Spring Boot 这样的框架来封装 RESTful Web Service ，再借助诸如 WinSCP 工具将前后两端各自独立打包好的产物传输给远程 Linux 主机上的指定存储空间内[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值