vue2.0项目结构和打包发布

最新推荐文章于 2025-01-06 13:58:48 发布
最新推荐文章于 2025-01-06 13:58:48 发布
阅读量165 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/webSong/p/7307125.html
本文介绍了一个Vue项目的本地开发测试及部署流程，包括使用npm命令进行开发环境启动与生产环境打包的方法，并详细说明了如何通过修改config/index.js文件中的assetsPublicPath属性来调整部署路径。

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

先来一张项目结构图：

本地开发测试运行的命令是npm run dev

打包发布的命令是 npm run build生成的dist文件夹里的文件就是我们可以布置到服务上的文件

但是呢，这打包好的文件的文件地址都是/根目录的，如果我们需要更改这个默认的更目录路径，需要在config文件夹里的index.js里的

assetsPublicPath: '/',修改目录就行了，这里它默认的就是根目录。

转载于:https://www.cnblogs.com/webSong/p/7307125.html

vue3.0和vue2.0的区别详细讲解
aaa123aaasqw的博客
07-04 2103
vue经历从2.0到3.0更新之后,简⽽⾔之就是变得更轻更快,使⽤起来更加⽅便,下面这篇文章主要给大家介绍了关于vue3.0和vue2.0区别的相关资料,需要的朋友可以参考下Vue 3.0是一个用于构建用户界面的JavaScript框架。相比于Vue 2.x，Vue 3.0在性能、体积和开发体验上都有了很大的提升。
【vue2.0入门】认识vue工程
qbbmnnnnnn的博客
11-08 1348
在熟悉以上文件以及其作用后，接下来我们就开始尝试开展一些vue页面的开发工作了，其他没介绍的内容以及未来可能会新增的内容我们可以边学边补充。 此外我们还介绍了vuejs devtools浏览器插件的下载、安装和使用。方便我们在日后开发vue项目时可以更准确的获取项目运行时的各类信息，提高代码开发效率。
二、Vue2.0项目结构内容及配置解析
qq_23135259的博客
01-13 2986
vue结构目录解析及main.js详细内容解析
vue2从0开始打包发布npm包，踩坑无数，完整版
qq_45624939的博客
06-06 4210
初始化的package.json中“name”参数就是要发布的npm包的名字，必须是唯一的，可以去npm官网搜一搜有没有重名的；三、假设两个.vue文件就是我们想要打包的组件，我们要先将他们暴露出去，在项目的根目录（src同级）或src/components文件夹中新建一个文件index.js。这时候，项目就成功启动起来了，打开链接 http://localhost:8080 ，就可以看到我们的项目了。按回车后，大概需要5分钟，甚至更久，才会新建成功，慢慢等待。至此成功，真是踩了无数的坑！
vue-项目打包
前端
12-18 3509
作为一个前端之前并没有打包过项目，因此想一下打包的效果，记录一下我的打包过程：作为一个开端 首先，项目打包前的目录结构 然后，运行命令行 npm run build 因为是第一次打包，不熟悉打包的过程，与文件的变更，首先看了一下文件的结构，发现没有compenent与views中文件的生成目录。是没有打包进去么？ 先看一下效果，看一下是否打包进入了。 当我运行的时候发现页面报错，是个空白页，从...
vue2.0项目详解
孙霸天的专栏
03-03 1845
vue2.0(vue-cli)项目详解 创建vue项目 电脑系统为windows11，这里我使用WebStorm来创建项目，需要电脑安装node环境，node的版本为14.17.5，如下图所示 这里我的项目还是vue.2.x版本 创建步骤 点击New Project创建项目 选择Vue,js项目 点击创建后，IDE会自动下载相关依赖，执行相关操作 依赖下载完成后，如下图所示，会自动构建索引，方便方法的智能提示 项目结构 项目结构如下所示，如果没有vue.config.js，那就手动创建这个文件
总结Vue 第四天~Vue CLI----（Vue2.0 新手入门 — 从环境搭建到发布）
伟庭的博客
12-25 749
总结Vue 第四天~Vue CLI----（Vue2.0 新手入门 — 从环境搭建到发布）
vue2.0项目
05-10
Vue2.0项目是基于Vue.js 2.0构建的应用程序，通常包括一系列组件化、路由管理、状态管理和优化策略。在这个项目中，开发者利用Vue2.0的强大功能来实现各种交互和动态效果。 Vue的核心特性包括： 1. **虚拟DOM**：...
vue2.0中文离线官网文档（手册，教程，api）
06-29
本文将深入探讨Vue.js 2.0的关键知识点，包括Vue CLI、项目结构、组件系统以及组件间的通信。 **Vue CLI** 是Vue.js官方提供的一个脚手架工具，它简化了Vue应用的初始化过程。通过Vue CLI，开发者可以从预定义的...
vue2.0_project:vue2.0项目实战原始码（购物车和地址选配）
03-24
2. **项目结构** - **vue2.0_project-master**：这通常是项目的主要目录，包含所有源代码、配置文件和资源。 - **src**：源代码目录，通常包含`components`（组件）、`assets`（静态资源）、`router`（路由）、`...
vue2.0项目组成
田兴的博客
12-12 473
VUE2.0项目组成和打包发布 vue项目结构图： 本地开发测试运行的命令是npm run dev 打包发布的命令是 npm run build生成的dist文件夹里的文件就是我们可以布置到服务上的文件 但是呢，这打包好的文件的文件地址都是/根目录的，如果我们需要更改这个默认的更目录路径，需要在config文件夹里的index.js里的 assetsPublicPath: ‘/’,修改目录就...
Vue 打包和部署
最新发布
Flying_Fish_roe的博客
01-06 4093
打包和部署是 Vue 应用上线的关键步骤，通过 Vue CLI 可以快速完成生产环境的打包。Vue 提供了灵活的配置选项，使得项目可以适配各种部署场景。在部署时，根据项目需求选择合适的托管方式，例如 Nginx、Netlify 或 Docker。通过合理的配置和优化，可以确保应用的高性能和可靠性。
Vue 2.0 最全面学习总结，适合新手快速入门
聪哥965
01-26 817
1 Vue.js 安装 2 Vue.js 目录结构 结构如图所示： 3 Vue.js 模板语法 4 生命周期 实例： 5 Vue.js 条件语句 6 Vue.js 循环语句 7 Vue.js 计算属性 8 Vue.js 样式绑定 9 Vue.js 事件处理器 10 Vue.js 表单 11 Vue.js 组件 12 Vue.js 自定义组件 13 Vue.js 路由 ...
Vue2.0 新手完全填坑攻略—从环境搭建到发布——Jinkey 原创
weixin_33726313的博客
10-10 697
本文作者 Jinkey（微信公众号 jinkey-love，官网 https://jinkey.ai）文章允许非篡改署名转载，删除或修改本段版权信息转载的，视为侵犯知识产权，我们保留追求您法律责任的权利，特此声明！感谢 showonne、yubang 技术指导Demo 地址:http://demo.jinkey.io/vue2源码:ht...
vue+springboot前后端分离项目整合部署流程
haohulala的博客
05-30 5579
我们在进行前后端分离开发的时候，一般是将前端项目部署到nginx服务器上，与后端项目分开部署，但是如果是个人开发的小型项目，不需要这么麻烦，直接将前后端项目放到一起部署即可。本文就来介绍一下前后端项目一起部署的流程。
SpringBoot+Vue项目部署（传统方式）
weixin_44924882的博客
04-09 6489
虽然项目打包后用jar包里的配置文件也可以启动，但是推荐将配置文件提取出来，一般开发环境和生产环境的配置是不一样的，通过加载外部配置文件的方式启动，更便于维护配置信息，这里生成一个web-server.yml的配置文件，里面是项目的配置信息，可以根据项目实际需要生成。为了方便，有时候我们会连接本地的MySQL数据库，数据库安装成功后默认远程连接是关闭的，3306端口也是不对外开发的，需要做如下配置。项目在本地可以正常启动，这是因为本地有安装JDK，数据库等，若想要项目在服务器上也能正常启动，则同样需要。
vue通过maven自动打包成jar
tmd
10-12 1923
SpringBoot和VUE前后端合并自动打包成jar
Vue项目的打包上线步骤
Gik99的博客
03-29 1068
Vue项目的打包上线步骤
SpringBoot整合VUE源码打包成jar部署——解决步骤和踩坑记录
热门推荐
qq_33388068的博客
09-20 1万+
一、前言 项目是前后端分离的springboot+vue，之前都是前后端分开部署的，前端打成dist，后端打成war包部署到tomcat。突然项目来个需求，需要将前端的vue整合到后端的springboot打包成jar包部署，才疏学浅一时间不知如何处理，只能网上找各种资料。期间踩了很多坑，总算是解决了。 二、解决的步骤 1、首先vue打成dist包，发给后端的我，我把这个包放在resources的static目录下，目录结构如下 2、配置拦截器，映射静态资源，这里有两种方法，第一种可以继承.
Vue 2.0 项目开发实践入门指南
本节总结了 Vue 2.0 开发实践的入门知识，包括 Vue 2.0 项目结构、Webpack 基本知识点、Vue-cli 安装和使用、项目预览和项目配置。这些知识点将帮助读者快速了解 Vue 2.0 的基本概念和使用方法，为后续的学习和实践...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值