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

相关推荐
HuangYongbiao16 分钟前
Rspack 原理:webpack,我为什么不要你
前端
yinuo20 分钟前
前端项目开发阶段崩溃?试试这招“Node 内存扩容术”,立马复活!
前端
前端鳄鱼崽22 分钟前
【react-native-inspector】全网唯一开源 react-native 点击组件跳转到编辑器
前端·react native·react.js
用户984022766791822 分钟前
【React.js】渐变环形进度条
前端·react.js·svg
90后的晨仔23 分钟前
Webpack完全指南:从零到一彻底掌握前端构建工具
前端·vue.js
Holin_浩霖24 分钟前
JavaScript 语言革命:ES6+ 现代编程范式深度解析与工程实践
前端
前端拿破轮29 分钟前
从0到1搭一个monorepo项目(一)
前端·javascript·git
m0_7414122434 分钟前
大文件上传与文件下载
前端
wu_jing_sheng035 分钟前
Python中使用HTTP 206状态码实现大文件下载的完整指南
开发语言·前端·python
90后的晨仔40 分钟前
Vue3项目全面部署指南:从构建到上线
前端·vue.js