vue-cli2升级为vue-cli3

公司的项目之前是用vue-cli2构建的，有同事抱怨修改配置等会和cli3稍有差距，因此尝试升级到cli3

采用的方法是直接新建cli3项目，然后把主要代码拷贝过去。没有选择单独升级webpack和vue-cli

因为马虎也遇到了一些小问题，在此记录一下。

1.cli2的index.html对应cli3的public/index.html，直接替换即可。

2.cli2的static对应cli3的public目录，因此选择把static里的内容全都贴到了public中，需要注意的是，使用了static内文件的话，引用路径不要忘记都改成public

3.package.json文件，只需要把老的dependencies中的东西拷过来，devDependencies如果没有额外安装插件则不需要拷贝。需要注意的是，不要把vue、vue-router、vuex等版本给冲掉，只复制自己后来项目中自己安装的新插件。这样才能保持新版本呐

4.src为主要代码目录，直接替换过来即可。

经过以上几步拷贝，主要代码几乎全部已替换完成。接下来是一些配置问题。都是比较容易忽略的，别名，全局变量

1.配置webpack请求转发

（1）根目录下新建vue.config.js

（2）vue.config.js中配置如下

module.exports = {
    devServer: {
        proxy: {
          '/api': {
            target: '',
            ws: true,
            changeOrigin: true
          }
        }
  }
};

2.项目中有配置别名，因此要在cli3中配置别名。

(1) vue.config.js中配置如下

const path = require('path');
function resolve(dir) {
    return path.join(__dirname, dir);
}
module.exports = {
    chainWebpack: (config) => {
      config.resolve.alias
        .set('@', resolve('src'))
        .set('mobile_img',resolve('src/assets/images/mobile'))
        .set('mobile_css',resolve('src/assets/css/mobile_css'))
    }
};

3.项目在cli2中有全局配置变量，因此在cli3中要配置下全局引入less变量

（1）安装 style-resources-loader，网上教程都是vue add style-resources-loader，但我安装会出问题，Cannot find module 'node-ipc' style-resources-loader
因此选择的独立安装

npm i style-resources-loader

npm i vue-cli-plugin-style-resources-loader

（2）在vue.config.js中配置如下：

  const path = require('path');

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, "src/assets/css/var.less")] // 引入全局样式变量
    }
}
};

4.这次选择了eslint，一直报错表示很烦，因此要把eslint关掉，看网上说直接把package.json的相关配置注释掉就行，但我不可行

因此选择vue.config.js配置如下，修改后注意重启项目

module.exports = {
    devServer: {
        overlay: {
          warnings: false,
          errors: false
      }
  },
  lintOnSave: false,
};

5. 报错You are using the runtime-only build of Vue where the template compiler is not available.

（1）main.js中修改为如下：

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app")

到这里项目已经重新运行起来啦。

之前的项目中区分环境使用的配置文件，配置文件在开发，测试，正式各保存一份，以此来区分各个环境所使用的不同的域名。该配置文件不在代码库中，修改时需要各环境单独修改。。。饱受诟病，因此尝试使用环境变量来区分环境

（1）根目录新建相关.env文件。。。注意放在根目录，因为自己的马虎，找了好久的原因

（2）.env中配置相关变量以.env.test为例

注意自定义变量名必须以VUE_APP_开头

NODE_ENV = 'production'

VUE_APP_FLAG = 'test'

（3）package.json配置如下，npm dev serve 和 npm run build 会自动使NODE_ENV为devlopment和production

因此只新加了个test命令来区分测试和正式环境

（4）使用。用process.env.VUE_APP_FLAG便可区分不同环境进行分别配置

if (process.env.VUE_APP_FLAG == "production") {
  //正式
} else if (process.env.VUE_APP_FLAG == "test") {
  //测试
} else {
  //开发
}

到这里就结束啦，并不复杂，但可能别名，less变量等报错才想起还有这些配置呀，忘记把引用路径中的static改成public啦，eslint呀都会导致报错，，但线上有很多相关的问题解决方法，遇到的问题几乎都能找到，因此升级还是不麻烦的啦