idea编译打包前端vue项目

这篇具有很好参考价值的文章主要介绍了idea编译打包前端vue项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

网上download了一个前端vue项目 第一次接触前端记录一下编译打包遇到的问题

1、idea前端项目打包一般是依赖

                <groupId>org.codehaus.mojo</groupId>
                <artifactId>exec-maven-plugin</artifactId>
                <version>3.0.0</version>

这个maven插件 里面可以定义要执行的打包步骤 比如我的工程里面就有如下三个过程:

        <execution>
                        <id>saturn-web</id>
                        <phase>prepare-package</phase>
                        <goals>
                            <goal>exec</goal>
                        </goals>
                        <configuration>
                            <executable>sh</executable>
                            <commandlineArgs>npm-config.sh</commandlineArgs>
                        </configuration>
                    </execution>
                 
                    <execution>
                        <id>exec-npm-install</id>
                        <phase>prepare-package</phase>
                        <goals>
                            <goal>exec</goal>
                        </goals>
                        <configuration>
                            <executable>npm</executable>
                            <arguments>
                                <argument>install</argument>
                            </arguments>
                        </configuration>
                    </execution>


                    <execution>
                        <id>exec-npm-run-build</id>
                        <phase>prepare-package</phase>
                        <goals>
                            <goal>exec</goal>
                        </goals>
                        <configuration>
                            <executable>npm</executable>
                            <arguments>
                                <argument>run</argument>
                                <argument>build</argument>
                            </arguments>
                        </configuration>
                    </execution>

1、执行一个.sh脚本 2、运行npm install 3、运行npm run build

1、执行第一个过程的时候报错:Command execution failed.: Cannot run program "sh" 

这个很好理解 因为我是Windows的环境是执行不了shell脚本的,可能别人开发的时候用的mac电脑;后续我也找了很多变通的方法试图能在编译的时候能用直接用这个shell脚本,比如搜索"idea 运行 shell脚本"这样的关键字 大概会让你装bashsupport插件(只支持老版本的idea  新版本的idea只能用bashsupport pro但是是收费的,目前也没有可替代的其他插件) 或者在设置Tools>terminal的Shell  path为 git bash的路径。其实都没什么卵用。

究其原因还是运行在windows系统下没有shell解释器 因为当运行maven在执行 sh xxx.sh这条命令时是调用的操作系统的命令,如果环境变量中没有一个叫sh的程序,自然是无法运行。

最后解决的办法是老老实实把别人的shell脚本 自己根据windows batch的语法改成windows 的bat脚本。

                   <execution>
                        <id>saturn-web1</id>
                        <phase>prepare-package</phase>
                        <goals>
                            <goal>exec</goal>
                        </goals>
                        <configuration>
                            <executable>npm-config.bat</executable>
                        </configuration>
                    </execution>

2、执行第二个 npm install的时候坑就更多了一开始提醒我没有装python,报错跟上边类似Command execution failed.: Cannot run program "python" 

好吧我装,装了一个python3的版本,设置好环境变量,又提示我版本不对 要装python2 无语继续再装一个python  2.7版的 装好了重启生效。

然后又提示我node sass下载失败

verbose stack Error: node-sass@4.14.1 postinstall: `node scripts/build.js`
verbose stack Exit status 1

等等 咨询前端同事后告知可能是node版本不匹配,因为我之前做另一个项目时node版本装的比较高,又下载一个nvm 然后切换到比较低的node 版本。

🆗 这下报错又变了 变成Cannot run program "npm" ,检查环境变量时配置了的 重启也没有用。

后来网上查询到要以”管理员身份运行“打开 idea,因为我这idea也是新装的, ok 终于可以成功打包了,貌似只要有一次以”管理员身份运行“打开 idea就行 后来退出重新双击打开idea再打包也没有再报错。文章来源地址https://www.toymoban.com/news/detail-817653.html

到了这里,关于idea编译打包前端vue项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • Linux 创建 intellij-idea快捷方式

    在 Linux 中,可以通过创建快捷方式的方式方便地打开 IntelliJ IDEA 开发工具。下面是创建 IntelliJ IDEA 快捷方式的详细步骤: 第1步:打开终端窗口 首先,要打开终端窗口。可以通过快捷键 Ctrl + Alt + T 打开终端窗口。也可以在系统菜单栏中选择“应用程序”-“实用工具”-“终端

    2024年02月03日
    浏览(45)
  • Java开发+Intellij-idea+Maven+工程构建

    Java开发+Intellij-idea+Maven+工程构建

    Intellij-idea是一款流行的Java集成开发环境,它支持Maven作为项目管理和构建工具。Maven可以帮助开发者自动下载项目依赖的jar包,执行编译、测试、打包等生命周期任务。本资源将介绍如何在Intellij-idea中创建、导入、转换和编译Maven工程,以及如何配置Maven的相关参数和插件。

    2024年02月01日
    浏览(43)
  • Windows Java JavaFX IntelliJ IDEA 开发环境搭建 创建工程 编译运行 打包分发 自定义运行时

    Windows Java JavaFX IntelliJ IDEA 开发环境搭建 创建工程 编译运行 打包分发 自定义运行时

    博文目录 JavaFX 官网 官网 Getting Started with JavaFX JavaFX 是一个开源的下一代客户端应用程序平台,适用于基于 Java 构建的桌面、移动和嵌入式系统。它是许多个人和公司的协作成果,目标是为开发富客户端应用程序生成一个现代、高效且功能齐全的工具包。 JavaFX 主要致力于富

    2024年02月05日
    浏览(13)
  • INTELlij IDEA编辑VUE项目

    INTELlij IDEA编辑VUE项目

    菜单中选择setting–Plugins  或者快捷键 ctrl+alt+s 搜索vue,但有些情况会搜索不出来,先说搜索到的情况 如下图所示: 如果没有vue.js则说明过去已经安装了。 搜索到了后点击Install安装即可, 但即使搜索成功了,也不一定能安装成功。 如果一切顺利,恭喜... 如果不成功还有方

    2024年02月07日
    浏览(9)
  • docker打包vue vite前端项目

    docker打包vue vite前端项目

    (如若提供一些帮助,请帮忙点个赞) 1.打包时将测试删除 2.修改配置 3.打包项目 npm run build 显示成功(黄的也不知道是啥) 打包好的前端文件放入 4.配置 default.conf 5.配置dockerfile 6.进入你的文件夹下面 我的是 /root/206/web docker build -t web:v1 . 注意后面的 . 点 7.运行 docker run -it -

    2024年02月07日
    浏览(9)
  • 前端Vue项目webpack打包部署后源码泄露解决

    前端Vue项目webpack打包部署后源码泄露解决

    前端项目使用nuxt框架(基于Vue),采用Webpack打包,部署到服务器后,进行漏洞检测。 经Webpack打包部署到服务器后,访问并打开开发者模式,在Source下出现[name]路径,内部包含(webpack)buildin文件夹。(做漏洞分析时,会认为该内容涉及源码泄露) 1.首先考虑源码泄露的问题 打

    2024年02月03日
    浏览(11)
  • nginx: 部署前端项目的详细步骤(vue项目build打包+nginx部署)

    nginx: 部署前端项目的详细步骤(vue项目build打包+nginx部署)

    目录 第一章 前言 第二章 准备工作 2.1 项目打包理解 2.1.1 打包命令 2.1.2 理解npm run serve/dev 和 npm run build命令 2.2 nginx参数配置理解 2.2.1 nginx常用基本命令 2.2.2 默认配置 2.2.3 搭建不同网站的站点 2.2.4 禁止访问的目录以及一键申请SSL证书验证目录相关设置 2.2.5 根据文件类型设置

    2024年02月04日
    浏览(13)
  • IntelliJ IDEA编译Maven工程:一步步详解

    Apache Maven是一个流行的自动化构建工具,被广泛应用于Java项目的构建管理中。IntelliJ IDEA作为一个功能强大的集成开发环境(IDE),它提供了对Maven工程的天然支持,并能简化构建过程。本文将详细介绍如何在IntelliJ IDEA中编译Maven工程。 首先确保你有一个已安装的IntelliJ IDEA环

    2024年01月17日
    浏览(9)
  • 【前端部署】vue项目打包并部署到Linux服务器

    【前端部署】vue项目打包并部署到Linux服务器

    在vs code中打开vue前端项目文件夹,在终端中输入 npm run build ,打包完成后,在前端项目文件夹中会生成一个名为 dist 的文件夹,如下图所示: dist文件夹打开如下所示: 打开服务器终端,在终端中输入以下命令,下载nginx安装包。 其中nginx版本可以自己选择,具体版本可查看

    2024年02月06日
    浏览(49)
  • Gitlab CI/CD 自动化打包部署前端(vue)项目

    Gitlab CI/CD 自动化打包部署前端(vue)项目

    一、虚拟机安装 1.vmware下载 2.镜像下载 3.Ubuntu 4.新建虚拟机 一直点下一步,直到点击完成。 5.分配镜像 二、Gitlab CI/CD 自动化部署项目 1.配置GitLab CI/CD: 2.生成SSH密钥对: 如果尚未生成,请在本地机器上生成一个SSH密钥对: 3.将SSH私钥添加到GitLab: 4.更新GitLab CI/CD配置: 5

    2024年03月13日
    浏览(7)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包