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

相关推荐
金梦人生1 分钟前
JS 性能优化
前端·javascript
我有一棵树8 分钟前
使用Flex布局实现多行多列,每个列宽度相同
前端·css·html·scss·flex
浪裡遊10 分钟前
React开发模式解析:JSX语法与生命周期管理
前端·javascript·react.js·前端框架·ecmascript
用户8772447539615 分钟前
Lubanno7UniverSheet:开放底层能力,让你的表格需求 “不设限”
前端
张可爱21 分钟前
ES6奶茶铺版通俗笔记 🍵✨
前端
用户8772447539621 分钟前
Lubanno7UniverSheet:选择命令式,为了真正的跨框架通用
前端
Aoda27 分钟前
从痛点到落地:PawHaven 的 Monorepo 架构设计
前端·javascript
望获linux30 分钟前
【实时Linux实战系列】使用 u-trace 或 a-trace 进行用户态应用剖析
java·linux·前端·网络·数据库·elasticsearch·操作系统
zxg_神说要有光37 分钟前
我好像找到了最适合我的生活状态
前端·javascript
飞哥数智坊41 分钟前
今天,我的个人网站正式上线了!
前端