当前位置：首页 > article >正文

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

article 2024/12/5 10:10:22

一、配置

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': "" }
      }
    }
  }
};