IDEA打包VUE项目

已于 2023-09-15 11:56:30 修改
阅读量2.5k 收藏 11
点赞数 4
分类专栏： intellij-idea 文章标签： vue.js intellij-idea 前端
于 2023-04-18 16:16:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52116015/article/details/130224078
版权
通过package.json打开终端，执行`npmrunbuild`进行Vue项目的打包，当控制台显示Buildcomplete，表示打包成功，打包后的文件位于dist目录。若要在Tomcat上访问，需配置Tomcat以支持静态资源访问。
摘要由CSDN通过智能技术生成

目录

1、找到 package.json ，右键选择 Open in Terminal 打开控制台

在这里插入图片描述

2、输入 npm run build 进行打包

在这里插入图片描述

3、控制台出现 Build complete 提示说明打包完成，可在 dist目录 下找到打包后的文件

在这里插入图片描述

注意：打包后的vue项目如果需要通过tomcat进行访问，需要在tomcat配置静态资源访问

tomcat配置静态资源访问：http://t.csdn.cn/USW7y

天黑请​闭眼
关注
专栏目录
vue项目Intellij IDEA上前端打包
12-16 9663
Intellij IDEA搭建vue-cli项目，VUE前后端分离项目的打包、发布，vue项目开发环境搭建
IDEA搭建Vue开发环境(安装Node.js、安装vue-cli、创建项目、编译项目、启动项目、yarn启动项目、npm和yarn命令行命令简单使用)
最新发布
Bulut0907
07-22 1609
因为这个yarn和Hadoop的yarn命令会冲突，所以修改E:\install_software\Node.js\node-v20.4.0-win-x64路径下的yarn.cmd名称为yarnJs.cmd。使用IDEA打开项目, 然后在File–Settings–Plugins–Makerplace搜索vue.js, 安装并重启IDEA。再将E:\install_software\Node.js\node-v20.4.0-win-x64目录配置到环境变量。进入项目目录，安装项目所需依赖。
SpringBoot+Vue项目的打包部署教程
m0_74105684的博客
07-12 1850
本教程旨在帮助开发者，完成基于springboot后端项目和基于vue前端项目的打包以及服务器部署。本教程的前提是开发者已经拥有一个完整的springboot+vue的前后端分离的项目，以及一台配置好JDK和MySQL以及nginx的环境的云服务器。目标是能够将项目部署到云服务器上，并通过云服务器的IP访问项目。
Idea中打包vue项目
u011010220的博客
12-16 9870
首先使用idea打开vue工程，并在vue工程中找到其根目录的文件，package.json 右击package.json文件，选择右击菜单下的open in terminal选项 这时打开terminal控制台，会根据选择的package文件路径自动切换到此文件所在路径上 在控制台输入npm run build，准备开始进行打包 提示如下信息，说明打包工作已经开始 等最后提示如下信息时，打包完成。 已经打完的包可在同级..
创建的vue项目--打包
醉殇姒若梦遗年 ツ的博客
01-30 2729
自创建的项目（未使用项目框架），使用weabpack打包，若出现空白页；若加载图片（img标签）成功，加载背景图片（css中）和字体文件失败。
详解vue项目的构建，打包，发布全过程
11-27
很多朋友对于VUE项目的一系列流程不熟悉，小编根据网友提出的问题，整理了关于vue项目的构建打包发布全过程，希望对你有用。 一、vue项目的创建 1、首先第一肯定是要有Node.js及npm这个不多说了 2、安装脚手架 此时可以直接浏览-但是现在肯定有很多小白想将他发布到gitHub上并可以浏览，使用vue全家桶制作自己的博客。 现在就有我来说说如何讲vue项目发布到github上 之前写过vue环境搭建 可以参考： vue环境搭建 二、vue项目的打包 1、大家都知道使用npm run build进行打包，这个时候你直接打开dist/下的index.html,会发现文件可以打开，但是
使用 Idea 运行打包已有的 vue 项目 新手教程！
wangjw.bug
11-09 2466
使用 Idea 运行打包已有的 vue 项目 新手教程！
idea编译打包前端vue项目
aa1382525的专栏
01-22 1989
这个很好理解 因为我是Windows的环境是执行不了shell脚本的，可能别人开发的时候用的mac电脑；后续我也找了很多变通的方法试图能在编译的时候能用直接用这个shell脚本，比如搜索"idea 运行 shell脚本"这样的关键字 大概会让你装bashsupport插件（只支持老版本的idea 新版本的idea只能用bashsupport pro但是是收费的，目前也没有可替代的其他插件） 或者在设置Tools>terminal的Shell path为 git bash的路径。
IDEA打包vue工程
qq_52674099的博客
05-15 1265
7.右键,open in Explorer,外部文件夹访问就可以找到dist的存放位置啦 (> , <)!3.在Terminal中键入 npm run build。2.右键，open in Terminal。1.找到package.json文件。6. 出现dist包。
IDEA中Vue开发环境搭建
yinshengchen的博客
04-18 7332
要解决 “npm ERR!missing script: build” 错误，我们需要在 package.json 文件中定义一个名为 “build” 的构建脚本。找到项目根目录中的package.json文件，这里列出了项目所依赖的所有资源与版本号，右键该文件，打开于终端，输入npm install 命令安装所有依赖；在上述代码中，我们添加了一个名为 “build” 的构建脚本，该脚本使用 webpack 进行生产模式构建。(3) 右侧“Scripts”处输入“dev”，其它idea已经默认选好。
vue项目详细搭建步骤
04-02
详细描述怎么搭建vue项目，nodejs安装，idea支持，以及vue打包部署
idea插件 vue.js IDEA2017.3亲测可装 无兼容问题
05-10
idea插件 vue.js IDEA2017.3亲测可装 无兼容问题 Setting>plugins>install plugin from disk 选择文件安装完重启即可
idea启动vue项目
热门推荐
m0_67402731的博客
08-01 2万+
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。配置选项，package.json选择的是项目自带的package.json，Scipts点击右侧下辣，选中命令，一般启动是dev或start等等，这个一般来源于项目自带的package.json设置的启动命令。搜索vue，点击安装上，会提示重启idea，重启就行了。...
IDEA创建Vue项目
easyJob
08-21 691
※基础知识： A.node.js Node.js是一个Javascript运行环境(runtime)，发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快，性能非常好。 Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞I/
从头搭建VUE环境，使用IDEA 2021创建VUE项目
Klee2020的博客
03-10 8180
从零搭建VUE环境 IDEA 2021 创建VUE工程
idea vue 打包_mall改造：vue环境的搭建
weixin_39672680的博客
01-20 136
一、使用之前，我们先来掌握3个东西是用来干什么的。npm: Nodejs下的包管理器。webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装)开始：​下载好就下一步，下...
IDEA打包vue项目成移动端app
weixin_39145193的博客
11-07 4902
1.需要的工具 IDEA,HBuilder 2.打包过程 1）首先在项目中package.json中操作build:vue指令，项目会生成dist文件夹 3.用HBuilder直接打包移动端app 先新建移动端app,然后删除项目下除了manifest.json所有的文件，然后将第一步中dist文件夹下的文件都拷贝到项目下，然后选择发行-打包原生安装包 ...
使用IDEA后端java代码打包为jar，使用Nginx打包前端Vue
qq_62015542的博客
01-17 2891
使用IDEA后端java代码打包为jar，使用Nginx打包前端Vue
idea打包vue docker镜像
06-06
要打包Vue Docker镜像，您需要按照以下步骤操作： 1. 首先，您需要在本地计算机上安装Docker。 2. 然后，您需要在Vue项目的根目录下创建一个名为Dockerfile的文件。 3. 在Dockerfile中，您需要指定要使用的基础...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值