vuecli2 脚手架升级到 vuecli5 以及打包部署注意事项

本地vuecli2 先升级到vuecli5创建的vue2项目 具体思路步骤

1. 如果自的vuecli比较老，可以参考vue官方

npm uninstall -g vue-cli // 卸载老版本脚手架
npm cache clean --force // 清除缓存之后
npm install -g @vue/cli // 安装新的脚手架

2. 然后用新的vuecli创建新的 项目，之后把老的项目，src文件夹移入到新的项目，static文件夹移入（然后需要把项目中用到statci下的文件夹的资源 路径 需要替换掉）

  // 函数写法配置 webpack
  configureWebpack: (config) => {
    // 1.配置别名
    config.resolve.alias["@"] = resolve("src");
    config.resolve.alias['public'] = resolve('public')
  }

3.vue.config.js中安装 因为vuecli5 创建的vue2项目中使用的webpack5。移除了node.js中的一些api和全局变量，会报错。

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin"); // 添加 node-polyfill-webpack-plugin 插件，用于在浏览器环境中引入 Node.js 中的一些 API 和全局变量

4. 因为项目使用的scss全局变量，所以也要重新在vue.config.js中配置。

 css: {
    loaderOptions: {
      // 向所有 Sass/Less 样式传入共享的全局变量
      // sass: {
      //     // @/ 是 src/ 的别名
      //     // 所以这里假设你有 `src/variables.sass` 这个文件
      //     // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
      //     additionalData: `@import "./src/assets/sass/index.sass`,
      //   },
      scss: {
        //依次导入的公用的scss变量，公用的scss混入，共用的默认样式  sass-loader:v10以上就用：additionalData?
        // sass-loader:v8以上就用：prependData
        // sass-loader:v8-以下就用：data  // 路径引入
        additionalData: `@import "@/styles/variables.scss";`,
      },
      // 给 less-loader 传递 Less.js 相关选项
      less: {
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `lessprimary` is global variables fields name
        globalVars: {
          lessprimary: "#fff",
        },
      },
    },
  },

5. 项目中使用到svg 也要重新配置

  // webpack链式高级配置
  chainWebpack: (config) => {
    // 添加svg规则，去除默认的svg规则
    config.module
      .rule("svg")
      .exclude.add(path.resolve(__dirname, "src/icons"))
      .end();

    // 添加图标规则，只针对src/icons目录下的svg文件
    config.module
      .rule("svg-icons")
      .test(/\.svg$/)
      .include.add(path.resolve(__dirname, "src/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({ symbolId: 'icon-[name]'})
      .end();
  },
});

6. 然后就是 一些配置对应起来

publicPath:
默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/
assetsDir:就是打包之后资源的文件名称
放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。

6. 然后就是环境变量的对应 目前我项目中 用到如下三个环境
   axios发起请求的 baseURL也要改动，引入vuecli2x 以上 可以自己定义 不过要以 VUE_APP开头
   （VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中）
   

VUE_APP_BASE_API
development
NODE_ENV = development
VUE_APP_BASE_API = /api //这个是请求的时候基本 url

production
NODE_ENV = production
VUE_APP_BASE_API = http://xx.xx.xx/fullyautoPlatform

然后就是package.json包中的 运行命令一一对应

8. 然后就是一些小问题，可以自己百度解决

如 /deep/ 写法换成  ::v-deep

部署遇到的问题：
8. 如果之前服务器上cnpm 安装的 node_modules 在生产改用npm安装（或者相反 本地npm 远程cnpm），建议删除node_modules文件夹和package-lock.json包 然后再重新执行 npm install命令
9. 还有就是个我的项目 需要配置全局的scss变量。如下vue.config.js

  css: {
    loaderOptions: {
      // 向所有 Sass/Less 样式传入共享的全局变量
      // sass: {
      //     // @/ 是 src/ 的别名
      //     // 所以这里假设你有 `src/variables.sass` 这个文件
      //     // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
      //     additionalData: `@import "./src/assets/sass/index.sass`,
      //   },
      scss: {
        //依次导入的公用的scss变量，公用的scss混入，共用的默认样式  sass-loader:v10以上就用：additionalData?
        // sass-loader:v8以上就用：prependData
        // sass-loader:v8-以下就用：data  // 路径引入
        additionalData: `@import "@/styles/variables.scss";`,
      },
      // 给 less-loader 传递 Less.js 相关选项
      less: {
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `lessprimary` is global variables fields name
        globalVars: {
          lessprimary: "#fff",
        },
      },
    },
  },

这里引入mixins.scss的原因是 在mixin.scss也使用了scss全局的变量。所以需要scss-loader去处理。

10. 打包部署 报错不能读取 theme。发现是 variables 取不到theme造成的，目前先注释掉。

.