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

相关推荐
求知摆渡3 分钟前
从零开始搭建typecho
前端·后端
极客悟道3 分钟前
彻底搞懂Java值传递:90%开发者都会踩的坑
前端·后端
Mintopia13 分钟前
计算机图形学中的毛发与布料模拟:让虚拟世界动起来的魔法
前端·javascript·计算机图形学
小飞悟16 分钟前
组件通信的艺术:从 props 钻井到 context 共享的进化之路
前端·javascript·设计模式
Mintopia17 分钟前
Three.js 中正切函数在相机视野里的那些事儿
前端·javascript·three.js
Dream耀20 分钟前
掌握React useContext:轻量级状态共享与性能优化指南
前端·javascript·react.js
十盒半价20 分钟前
Stylus 伪元素:让 CSS 玩出 “无中生有” 的新花样
前端·css·trae
红衣信21 分钟前
React 中 useContext 的使用与状态共享详解
前端·react.js·面试
断竿散人21 分钟前
JavaScript 事件系统完全指南:从事件流原理到现代化事件处理实战
前端·javascript
梨子同志22 分钟前
Vue 生命周期
前端·vue.js