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'