公司的项目之前是用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呀都会导致报错,,但线上有很多相关的问题解决方法,遇到的问题几乎都能找到,因此升级还是不麻烦的啦