【自用】管材流转项目前端重部署流程 vue2 webpackage4 vuecli4

一、配置

1.下载项目,使用 IDEA 打开,并配置 Nodejs

它提示我,需要 Node.js,因为 nodejs 14 的 installer 已经官网已经找不到了,使用 fnm 又太麻烦,
所以直接采用在 IDEA 中下载的方式就好了。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.清除缓存

2.1 删掉 node_modules、package-lock.json
2.2 清除 npm 缓存:

npm cache clean --force

在这里插入图片描述

查看缓存是否清理成功:

npm cache verify

输出如下,就差不多可以了:

Cache verified and compressed (~/.npm/_cacache):
Content verified: 0 (0 bytes)
Index entries: 0
Finished in Xms

在这里插入图片描述

3.使用国内镜像源(可选)

如果你没有魔法,那么可以这样做。

配置国内镜像源:

npm config set registry https://registry.npmmirror.com

验证是否配置成功

npm config get registry

在这里插入图片描述

4.配置 webpackage 4(降级,并兼容相关依赖)

npm install webpack@4 webpack-cli@3 --save-dev
npm install vue-loader@15 webpack-dev-server@3 --save-dev

在这里插入图片描述

确保 sass-loader 兼容 webpackage 4:

npm install sass-loader@10 --save-dev

在这里插入图片描述

5.安装 vue cli 4

npm install @vue/cli-service@4 --save-dev

在这里插入图片描述

6.修改 vue.config.js

module.exports = {
  transpileDependencies: [
    "some-dependency", // 示例依赖
  ],
  devServer: {
    port: 80,
    host: "0.0.0.0",
    proxy: {
      '/api': {
        target: "https://123.57.129.116:8181",
        // 此 IP 地址已废弃
        changOrigin: true,
        pathRewrite: { '^/api': "" }
      }
    }
  }
};

7.尝试运行

npm run serve

在这里插入图片描述

虽然报了几个 WARNING,但是成功。

二、未完待续,有 bug 再改

1.

2.

三、

1.

2.

四、

1.

2.

五、

1.

2.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/930258.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【优选算法篇】:双指针算法--开启高效编码的两把“魔法指针”,练习题演练

✨感谢您阅读本篇文章,文章内容是个人学习笔记的整理,如果哪里有误的话还请您指正噢✨ ✨ 个人主页:余辉zmh–CSDN博客 ✨ 文章所属专栏:c篇–CSDN博客 文章目录 一.双指针算法二.例题1.移动零2.复写零3.快乐数4.盛水最多的容器5.…

Figma入门-旋转效果

Figma入门-旋转效果 前言 在之前的工作中,大家的原型图都是使用 Axure 制作的,印象中 Figma 一直是个专业设计软件。 最近,很多产品朋友告诉我,很多原型图都开始用Figma制作了,并且很多组件都是内置的,对…

ffmpeg转码与加水印

文章目录 转码 与加水印引入jar包代码ffmpeg安装错误解决方法 转码 与加水印 引入jar包 <dependency><groupId>net.bramp.ffmpeg</groupId><artifactId>ffmpeg</artifactId><version>0.6.2</version></dependency>代码 impo…

网络原理 网络协议栈

POSIX API与网络协议栈 unix有不同的衍生版本&#xff0c;针对不同的版本&#xff0c;通过Posix定义了一套标准的操作系统接口API&#xff0c;使得不同的开发版本可以使用相同的API调用&#xff0c;具有可移植性。 网络连接相关API&#xff1a; 客户端 socket() bind() con…

将vscode上的项目提交到github上

1.windows终端中 创建github仓库 创建完成 提交代码 git init git config --global user.email "fuyulai2024163.com" git config --global user.name "Fuyulai-Hub" git add . git commit -m "first commit" git remote add origin https://g…

P4645 [COCI2006-2007#3] BICIKLI(Tarjan+topsort求到某点的方案数)

P4645 [COCI2006-2007#3] BICIKLI - 洛谷 | 计算机科学教育新生态 思路&#xff1a; 我们考虑输出inf的情况&#xff0c;可以发现当从1出发到2经过的任意一个点处于一个环内时&#xff0c;路径条数是无穷多的。 有向图上从s到t的经过点&#xff0c;就是从s出发所能经过的所有…

Linux C/C++编程中的多线程编程基本概念

【图书推荐】《Linux C与C一线开发实践&#xff08;第2版&#xff09;》_linux c与c一线开发实践pdf-CSDN博客《Linux C与C一线开发实践&#xff08;第2版&#xff09;&#xff08;Linux技术丛书&#xff09;》(朱文伟&#xff0c;李建英)【摘要 书评 试读】- 京东图书 (jd.com…

MongoDB整合SpringBoot

MongoDB整合SpringBoot 环境准备 1.引入依赖 <!--spring data mongodb--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-mongodb</artifactId> </dependency> 2.配置yml spr…

记录过程校准器:精准测量的未来驱动力与市场蓝海

在科技日新月异的今天&#xff0c;精确测量已成为工业制造、科学研究、环境监测等众多领域的核心要素。记录过程校准器&#xff0c;作为确保测量设备准确性和可靠性的关键工具&#xff0c;正扮演着越来越重要的角色。随着智能制造、物联网技术的快速发展&#xff0c;以及全球对…

【NLP 9、实践 ① 五维随机向量交叉熵多分类】

目录 五维向量交叉熵多分类 规律&#xff1a; 实现&#xff1a; 1.设计模型 2.生成数据集 3.模型测试 4.模型训练 5.对训练的模型进行验证 调用模型 你的平静&#xff0c;是你最强的力量 —— 24.12.6 五维向量交叉熵多分类 规律&#xff1a; x是一个五维(索引)向量&#xff…

STM32使用RCC(Reset Clock Contorl,复位时钟控制器)配置时钟以及时钟树

RCC主要作用 设置系统时钟SYSCLK&#xff08;System Clock&#xff09;频率&#xff1b;设置AHB、APB2、APB1以及各个外设分频因子&#xff0c;从而设置HCLK、PCLK2、PCLK1以及各个外设的时钟频率&#xff1b;控制AHB、APB2、APB1这三条总线时钟以及每个外设的时钟开启&#xf…

使用mtools搭建MongoDB复制集和分片集群

mtools介绍 mtools是一套基于Python实现的MongoDB工具集&#xff0c;其包括MongoDB日志分析、报表生成及简易的数据库安装等功能。它由MongoDB原生的工程师单独发起并做开源维护&#xff0c;目前已经有大量的使用者。 mtools所包含的一些常用组件如下&#xff1a; mlaunch支…

随记:win11 win+g 捕获 不能录视频 不用下载注册表修复工具

问题&#xff1a; 我解决的方法&#xff1a; win R 打开 再去 计算机\HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\GameDVR 这是我的问题&#xff0c;要是没有这个&#xff0c;可能是其他原因了 还有就是我还看到一个 上面那个不能解决的可以试试这个

算法刷题Day11: BM33 二叉树的镜像

点击题目链接 思路 转换为子问题&#xff1a;左右子树相反转。遍历手法&#xff1a;后序遍历 代码 class Solution:def Transverse(self,root: TreeNode):if root None:return rootnewleft self.Transverse(root.left)newright self.Transverse(root.right)# 对root节点…

【赵渝强老师】PostgreSQL的服务器日志文件

PostgreSQL数据库的物理存储结构主要是指硬盘上存储的文件&#xff0c;包括&#xff1a;数据文件、日志文件、参数文件、控制文件、WAL预写日志文件等等。下面重点讨论一下PostgreSQL的服务器日志文件。 视频讲解如下 【赵渝强老师】PostgreSQL的服务器日志文件 通过使用pg_ct…

【人工智能】深度解剖利用人工智能MSA模型

目录 情感分析的应用一、概述二、研究背景三、主要贡献四、模型结构和代码五、数据集介绍六、性能展示七、复现过程 情感分析的应用 近年来社交媒体的空前发展以及配备高质量摄像头的智能手机的出现&#xff0c;我们见证了多模态数据的爆炸性增长&#xff0c;如电影、短视频等…

行业标杆!鸿翼入选WAIC 2024《2024大模型典型示范应用案例集》

​7月5日&#xff0c;在2024世界人工智能大会“迈向 AGI&#xff1a;大模型焕新与产业赋能”论坛上&#xff0c;《2024大模型典型示范应用案例集》&#xff08;以下简称《案例集》&#xff09;重磅发布&#xff01;鸿翼AI项目成功入选&#xff0c;彰显了鸿翼在大模型应用领域的…

nodejs循环导出多个word表格文档

文章目录 nodejs循环导出多个word表格文档一、文档模板编辑二、安装依赖三、创建导出工具类exportWord.js四、调用五、效果图nodejs循环导出多个word表格文档 结果案例: 一、文档模板编辑 二、安装依赖 // 实现word下载的主要依赖 npm install docxtemplater pizzip --save/…

ABAP DIALOG屏幕编程1

一、DIALOG屏幕编程 DIALOG屏幕编程是SAP ABAP中用于创建用户交互界面的一种技术&#xff0c;主要用于开发事务性应用程序。它允许用户通过屏幕输入或操作数据&#xff0c;程序根据用户的操作执行逻辑处理。 1、DIALOG编程的主要组件 a、屏幕 (Screen) DIALOG程序的核心部分…

Shell免交互

Shell免交互 一. 变量配置1.1 在E0F外面的变量可以直接传入使用1.2 EOF的输入内容可以直接赋值给变量 二. expect语句2.1 转义符2.2 expect的语法2.3 格式2.4 脚本外传参2.5 嵌套 三. 访问其它主机 交互&#xff1a;当我们使用程序时&#xff0c;需要进入程序发出对应的指令&am…