vue-cli2.x升级到vue-cli4.x，vue脚手架升级

最新推荐文章于 2024-06-10 14:45:04 发布

闲鱼_JavaScript

最新推荐文章于 2024-06-10 14:45:04 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签： vue.js webpack javascript

本文链接：https://blog.csdn.net/weixin_47436633/article/details/124633814

版权

vue 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

简介

1. 项目脚手架为vue-cli2.x版本，开发干起来不舒服（项目可能会挂掉，热更新....），打包包大难维护，总之不舒服
2. 虽然现在vue-cli5已出，也有vite（还没去了解）。但是呢，先升级成vue-cli4看看吧。

进入正题

第一步肯定是自己创建一个vue-cli4的项目（vue create 项目名字），里面内容这些都不重要，因为后期会根据你自己项目package.json，重新弄
搬package.json到新项目的package.json
刚初始化出来的一般都这样

{
  "name": "demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.9",
    "@vue/cli-plugin-eslint": "~4.5.9",
    "@vue/cli-service": "~4.5.9",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

刚初始化完成的package.json，这里看看你们需不需要把script里面的启动配置和打包配置修改吧（此处启动项目为 npm run serve, 打包为npm run build）

最核心的是修改 package.json 中运行依赖 dependencies 和开发依赖 devDependencies
这里复制粘贴吧

注意

1. vue-cli4它内置了webpack，所以说老版本 dependencies 中看到webpack的不要移入新版本去（移过去目测要出问题，后期删掉的时候建议吧 node_modules 整个删掉重新来）
2. devDependencies 中含有 webpack、babel、postcss 剔除掉
3. devDependencies 含有 loader 的可以先剔除掉（保留 less-loader sass-loader css-loader）
4. 总而言之呢，跟着你项目需求删就完事。vue-cli2的配置文件中用了啥直接剔除掉就没事了。
5.devDependencies 其他的复制粘贴过去，其他地方就先不管了，有需求再改。
5. ......

处理 static 静态目录
因为vue-cli2.x中有 static 静态文件夹，相当于vue3.x以上的 public 文件夹。但是咱们不想把以前的东西自己手动扔到 public 文件夹里面去。于是咱们沿用以前的 static 文件夹 这个是需要加配置的（在vue.config.js中配置就行了）使用 CopyWebpackPlugin 这个插件（webpack的）

const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin([{
        from: './static',
        to: 'static'
      }])
    ],
  },
}

创建项目全局变量文件（与vue.config.js 、package.json 同级）
文件名（.env.development，.env.production）

.env.development

VUE_APP_ENV = 'development'
VUE_APP_BASE_API = '/'

.env.production

VUE_APP_ENV = 'production'
VUE_APP_BASE_API = '/'

来一份 vue.config.js 配置表

const CopyWebpackPlugin = require('copy-webpack-plugin')
const path = require('path')
module.exports = {
  // 打包生成的文件夹名字
  outputDir: 'dist',
  // 设置放置打包生成的静态资源 (js、css、img、fonts) 的目录。 该目录是相对于 outputDir 。
  assetsDir: 'public',
  filenameHashing: true,
  pages: {
    index: {
      // entry for the pages
      entry: 'src/main.js',
      // the source template
      template: 'public/index.html',
      // output as dist/index.html
      filename: 'index.html',
      // when using title option,
      // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'titie',
      // chunks to include on this pages, by default includes
      // extracted common chunks and vendor chunks.
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    }
  },
  // eslint 保存的时候是否检查
  lintOnSave: process.env.VUE_APP_ENV === 'development',
  // 是否使用包含运行时编译器的Vue核心的构建
  runtimeCompiler: false,
  // 生产环境 sourceMap
  productionSourceMap: false,
  // 构建时开启多进程处理 babel 编译
  parallel: require('os').cpus().length > 1,
  // 合并 webpack 配置
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin([{
        from: './static',
        to: 'static'
      }])
    ],
  },
  // 修改 webapck 配置
  chainWebpack: (config) => {
    // 因为是多页面，所以取消 chunks，每个页面只对应一个单独的 JS / CSS
    config.optimization
      .splitChunks({
        cacheGroups: {}
      })
    // 配置 全局样式文件的地方- 需下载依赖
    // const types = ["vue-modules", "vue", "normal-modules", "normal"];
    // types.forEach((type) =>
    //   addStyleResource(config.module.rule("less").oneOf(type))
    // );
    // function addStyleResource(rule) {
    //    rule
    //      .use("style-resource")
    //      .loader("style-resources-loader")
    //      .options({
    //        patterns: [path.resolve(__dirname, "./src/styles/anHui-new/common.less")],
    //      });
    //  }
    // 'node_modules' 不参与 eslint 检测
    config.module
      .rule('eslint')
      .exclude
      .add('/node_modules')
      .end()
  },

  // 代理配置地方
  devServer: {
  	// 构建时是否自动打开浏览器
    open: true,
    port: 7315,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'http://10.1.12.51:7356', // 开发环境
        changeOrigin: true, // 是否跨域
        secure: false,
         // 路径重定向 - 服务器 - 在 .env.xxx文件更改
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: [process.env.VUE_APP_BASE_API]
        }
      }
    }
  },
  // 第三方插件配置
  pluginOptions: {}
}