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日
    浏览(73)
  • Java开发+Intellij-idea+Maven+工程构建

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

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

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

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

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

    2024年02月07日
    浏览(41)
  • 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日
    浏览(33)
  • 前端Vue项目webpack打包部署后源码泄露解决

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

    2024年02月03日
    浏览(85)
  • 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日
    浏览(57)
  • IntelliJ IDEA编译Maven工程:一步步详解

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

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

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

    2024年02月06日
    浏览(64)
  • 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日
    浏览(59)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包