公司的項目之前是用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呀都會導致報錯，，但線上有很多相關的問題解決方法，遇到的問題幾乎都能找到，因此升級還是不麻煩的啦