vue cli2.x升级到3.x

一、升级脚手架的方式

安装最新的cli，如果电脑有以前2.x版本的cli，不能直接更新，先要卸载。

1. 卸载之前vue-cli版本

npm uninstall -g vue-cli

2. 安装新版本

npm install -g @vue/cli

cli1.x创建项目命令：vue create test

cli2.x创建项目指令：vue init webpack test 

 

二、配置

cli文档：https://cli.vuejs.org/zh/config/#%E7%9B%AE%E6%A0%87%E6%B5%8F%E8%A7%88%E5%99%A8

3.x以上的cli创建的vue项目需要手动配置，2.x是已经配置好的vue.config.js

1. 新建vue.config.js，输入以下代码

// 这个地方的参数配置可以参照vue cli https://cli.vuejs.org/zh/config/#全局-cli-配置，根据项目需要进行配置

module.exports = {

    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',

    outputDir: 'dist',

    devServer: {

        proxy: {

            '/api': {

                target: '线上接口地址',

                ws: true,

                changeOrigin: true,

                pathRewrite: {

                    '^/api': '/'  // 根据之前vuejs的配置，用来拿掉URL上的（/api），但是暂时没有什么效果

                }

            },

        }

    }

}

 

（一）配置生产、开发环境

1. 新建.env.production 输入以下代码

NODE_ENV = production

VUE_APP_URL = 'productionURL'

 

1. 新建.env.development 输入以下代码

NODE_ENV = development  

VUE_APP_URL = 'developmentURL'