【自用】管材流转项目前端重部署流程 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

javascript 复制代码
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.尝试运行

javascript 复制代码
npm run serve

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

二、未完待续,有 bug 再改

1.

2.

三、

1.

2.

四、

1.

2.

五、

1.

2.

相关推荐
亭台烟雨中4 分钟前
【前端记事】关于electron的入门使用
前端·javascript·electron
泯泷18 分钟前
「译」解析 JavaScript 中的循环依赖
前端·javascript·架构
抹茶san20 分钟前
前端实战:从 0 开始搭建 pnpm 单一仓库(1)
前端·架构
Senar1 小时前
Web端选择本地文件的几种方式
前端·javascript·html
烛阴1 小时前
UV Coordinates & Uniforms -- OpenGL UV坐标和Uniform变量
前端·webgl
姑苏洛言1 小时前
扫码小程序实现仓库进销存管理中遇到的问题 setStorageSync 存储大小限制错误解决方案
前端·后端
烛阴1 小时前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
lh_12542 小时前
ECharts 地图开发入门
前端·javascript·echarts