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