Idea中打包vue项目

最新推荐文章于 2024-05-28 16:22:32 发布
最新推荐文章于 2024-05-28 16:22:32 发布
阅读量9.6k 收藏 35
点赞数 5
分类专栏： 开发工具 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011010220/article/details/111253623
版权

  1. 首先使用idea打开vue工程，并在vue工程中找到其根目录的文件，package.json

    Idea中如何打包vue项目

  2. 右击package.json文件，选择右击菜单下的open in terminal选项

    Idea中如何打包vue项目

  3. 这时打开terminal控制台，会根据选择的package文件路径自动切换到此文件所在路径上

    Idea中如何打包vue项目

  4. 在控制台输入npm run build，准备开始进行打包

    Idea中如何打包vue项目

  5. 提示如下信息，说明打包工作已经开始

    Idea中如何打包vue项目

  6. 等最后提示如下信息时，打包完成。

    已经打完的包可在同级目录下dist文件夹下边找到

    Idea中如何打包vue项目

husbandgod
关注
  • 5
    点赞
  • 踩
  • 35
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解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,会发现文件可以打开，但是
详解vue项目打包后通过百度的BAE发布到网上的流程
08-27
1. 首先，需要将 Vue 项目打包，使用 npm run build 命令，会在 Vue 项目文件中重新创建一个 dist 文件，这个就是打包好的项目。 2. 然后，需要在百度应用引擎 BAE 部署一个项目，选择 Node.js 0.10.21-web 类型，...
IDEA打包VUE项目
weixin_52116015的博客
04-18 2238
idea打包vue项目 tomcat配置静态资源访问
npm run build命令详解及使用示例
最新发布
Leon_Jinhai_Sun的博客
05-28 2298
npm run build命令详解及使用示例
创建的vue项目--打包
醉殇姒若梦遗年 ツ的博客
01-30 2594
自创建的项目（未使用项目框架），使用weabpack打包，若出现空白页；若加载图片（img标签）成功，加载背景图片（css中）和字体文件失败。
idea编译打包前端vue项目
aa1382525的专栏
01-22 1875
这个很好理解 因为我是Windows的环境是执行不了shell脚本的，可能别人开发的时候用的mac电脑；后续我也找了很多变通的方法试图能在编译的时候能用直接用这个shell脚本，比如搜索"idea 运行 shell脚本"这样的关键字 大概会让你装bashsupport插件（只支持老版本的idea 新版本的idea只能用bashsupport pro但是是收费的，目前也没有可替代的其他插件） 或者在设置Tools>terminal的Shell path为 git bash的路径。
使用 Idea 运行打包已有的 vue 项目 新手教程！
wangjw.bug
11-09 2387
使用 Idea 运行打包已有的 vue 项目 新手教程！
IDEA打包vue工程
qq_52674099的博客
05-15 1194
7.右键,open in Explorer,外部文件夹访问就可以找到dist的存放位置啦 (> , <)!3.在Terminal中键入 npm run build。2.右键，open in Terminal。1.找到package.json文件。6. 出现dist包。
vue项目分环境打包配置不同命令
06-26
vue实现分环境打包，给不同的环境配置相对应的打包命令，添加功能版，带有之前的基本请求本地数据的底层网络请求和页面间跳转淡入淡出动画效果、header组件的使用、可用scss例子
vue项目打包后上传至GitHub并实现github-pages的预览
11-28
以下是一份详细的步骤指南，涵盖了从打包Vue项目到在GitHub Pages上预览的过程，以及解决可能遇到的问题。 1. **打包Vue项目** 在命令行中，进入Vue项目的根目录，运行`npm run build`命令来打包项目。这将生成一...
教你使用 IDEA 配置和运行vue项目(1).zip
02-20
在本文中，我们将深入探讨如何使用IntelliJ IDEA（简称IDEA）这一强大的集成开发环境来配置和运行Vue.js项目。Vue.js是一个轻量级、高性能的前端框架，被广泛应用于构建用户界面。IntelliJ IDEA是JetBrains公司出品...
vue项目详细搭建步骤
04-02
详细描述怎么搭建vue项目，nodejs安装，idea支持，以及vue打包部署
idea vue 打包_mall改造：vue环境的搭建
weixin_39672680的博客
01-20 114
一、使用之前，我们先来掌握3个东西是用来干什么的。npm: Nodejs下的包管理器。webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装)开始：​下载好就下一步，下...
IDEA打包vue项目成移动端app
weixin_39145193的博客
11-07 4878
1.需要的工具 IDEA,HBuilder 2.打包过程 1）首先在项目中package.json中操作build:vue指令，项目会生成dist文件夹 3.用HBuilder直接打包移动端app 先新建移动端app,然后删除项目下除了manifest.json所有的文件，然后将第一步中dist文件夹下的文件都拷贝到项目下，然后选择发行-打包原生安装包 ...
IDEA中Vue开发环境搭建
yinshengchen的博客
04-18 5147
要解决 “npm ERR!missing script: build” 错误，我们需要在 package.json 文件中定义一个名为 “build” 的构建脚本。找到项目根目录中的package.json文件，这里列出了项目所依赖的所有资源与版本号，右键该文件，打开于终端，输入npm install 命令安装所有依赖；在上述代码中，我们添加了一个名为 “build” 的构建脚本，该脚本使用 webpack 进行生产模式构建。(3) 右侧“Scripts”处输入“dev”，其它idea已经默认选好。
springboot在idea上的项目部署&&vue项目部署
superbroo的博客
08-31 948
springboot在idea上的项目部署&&vue
idea 配置vue启动，打包环境
小一佳
07-17 4570
启动环境： 打包环境：
使用IDEA后端java代码打包为jar，使用Nginx打包前端Vue
qq_62015542的博客
01-17 2630
使用IDEA后端java代码打包为jar，使用Nginx打包前端Vue
vue项目的package.json配置详解
cang23456_博客
03-02 4321
{ “name”: “vue-manage”, // 项目名称 “version”: “1.0.0”, // 版本 “description”: “Reimbursement Manage”, // 描述 “author”: “LXG”, // 作者 “private”: true, //是否私人项目 “scripts”: { “dev”: “node build/dev-server.js”, // npm run dev 的 dev，使用node执行 build/dev-server.js “start
idea的springboot vue项目怎么启动
06-23
### 回答1： idea集成了Maven和Spring Boot，可以很方便地启动SpringBoot项目。 首先，在idea中打开Vue项目，进入终端界面，使用命令`npm run build`打包，生成静态文件。 其次，在idea中打开SpringBoot项目，右键点击项目，选择“Run As” -> “Spring Boot App”，即可启动SpringBoot项目。 如果想要在浏览器中查看Vue项目，在Spring Boot的配置文件application.yml中加入以下配置： ``` spring: resources: static-locations: classpath:/META-INF/resources/,classpath:/resources/, classpath:/static/, classpath:/public/,file:/path-to-vue-dist-folder/ ``` 其中，`/path-to-vue-dist-folder/`是Vue项目打包后的输出目录。 启动完成后，在浏览器中访问`http://localhost:8080/`即可查看Vue项目。 ### 回答2： 要启动IDEA的Spring Boot Vue项目，我们需要进行以下步骤： 第一步：导入项目 将项目下载并解压缩，打开IDEA，选择 File -> New -> Project from Existing Sources，选择项目的pom.xml文件，然后根据提示完成导入。 第二步：配置运行环境 在IDEA的工具栏中，找到“Run configurations”，点击“Add New Configuration”，选择Spring Boot，在“Main class”中选择项目中的Applicaiton启动类，然后点击“Apply”保存。 第三步：运行项目 点击IDEA工具栏中的“Run”按钮或者使用快捷键“Shift+F10”，就可以启动项目。等待一段时间后，就可以看到控制台输出的日志信息，代表项目已经启动成功。 第四步：访问项目 在浏览器中输入http://localhost:8080，就可以访问项目了。 总结： 启动IDEA的Spring Boot Vue项目需要先导入项目并配置运行环境，然后使用IDEA工具栏中的“Run”按钮或者快捷键启动项目。启动成功后，可以在浏览器中访问项目。 ### 回答3： 要启动IDEA的Spring Boot Vue项目，需要按照以下步骤进行： 1.打开IDEA，并导入Spring Boot Vue项目的代码。 2.找到项目中的pom.xml文件，并在该文件上右键点击选择"Maven"->"Reimport"，以确保所有依赖库都可以正确加载。 3.打开终端或命令行，进入项目的根目录下，输入以下命令启动Spring Boot： mvn spring-boot:run 4.启动成功后，在浏览器中输入"http://localhost:8080/"即可访问应用程序。 5.如果该项目还包含Vue.js，需要安装依赖并启动Vue项目。进入项目的前端文件夹，输入以下命令安装依赖： npm install 6.安装完毕后，输入以下命令启动Vue： npm run dev 7.启动成功后，在浏览器中输入"http://localhost:8080/"即可访问Vue应用程序。 以上就是启动IDEA的Spring Boot Vue项目的步骤，希望对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值