1、首先要卸載你的老版本腳手架，npm uninstall vue-cli -g
2、安裝cli3? ?npm install -g @vue/cli
??????? ?如果網(wǎng)絡(luò)慢，跨域使用cnpm 【 安裝淘寶鏡像：npm i -g cnpm--registry=https://registry.npm.taobao.org? 】
3、創(chuàng)建項(xiàng)目：vue create your-project-name
??????? ?項(xiàng)目名稱【 your-project-name 】不能駝峰命名。
4、選擇一個(gè)預(yù)設(shè)?
? ? ? ? ? ?一、【選擇默認(rèn)?】等待創(chuàng)建后續(xù)的工具需要手動(dòng)安裝 例如：axios、router、vuex等；
? ? ? ? ? ? ? ? ? 創(chuàng)建完成后????? ?cd your-project-name? ??? ?npm run serve
? ? ? ? ? ? ? ? ? ? 如果要處理跨域問題需要手動(dòng)在根目錄【src同級(jí)目錄】下創(chuàng)建vue.config.js? ? ? ? ? ? ? ? ? ??
module.exports = {
? publicPath: process.env.NODE_ENV === 'prodection' ? './' : '/',
? productionSourceMap: false, // 生產(chǎn)源映射 如果不需要生產(chǎn)時(shí)的源映射，可以加速生產(chǎn)構(gòu)建
? devServer: {
? ? port: 8090,
? ? host: 'localhost',
? ? // https: true,
? ? proxy: {
? ? ? '/api': {
? ? ? ? target: 'http://42.120.7.54:8882/',
? ? ? ? ws: true,
? ? ? ? changeOrigin: true,
? ? ? ? pathRewrite: {
? ? ? ? ? '^/api': ''
? ? ? ? }
? ? ? },
? ? ? '/rbs': {
? ? ? ? target: 'https://mtest.picclife.cn/vp-policy-web/'
? ? ? }
? ? }
? }
}
??? 至于為什么要使用 publicPath而不是baseUrl請(qǐng)看運(yùn)行結(jié)果
? ? ? ? ? ? ? ? ? 二、選擇 Manually select features? 方式
選擇用到的配置
路由模式history
CSS??pre-processor
ESLint + Standard config?
等待創(chuàng)建 ??? ?項(xiàng)目創(chuàng)建完成? ??? ??? ??
其他問題后續(xù)補(bǔ)充。。。
? ? ? ? 補(bǔ)充來了? ? 配置環(huán)境變量
vue-cli3 提供了四種方式來定制環(huán)境變量
????1、在根目錄下添加.env 文件，配置所有情況下都會(huì)用到的配置；
? ? 2、在根目錄下添加.env. local 文件，配置所有情況下都會(huì)用到的配置，與.env不同的是它只會(huì)在本地，不會(huì)被git跟蹤；
? ? 3、在根目錄下添加.env. [ mode ] 文件，配置對(duì)應(yīng)模式下的配置，.env.development來配置開發(fā)環(huán)境；
? ? 4、在根目錄下添加.env. [ mode ]. local 文件，配置對(duì)應(yīng)某個(gè)模式下的配置,與.env.[mode]的區(qū)別也只是會(huì)在本地生效，該文件不會(huì)被git跟蹤。
環(huán)境變量的使用?
? ? 1、在項(xiàng)目中（src）使用變量要通過VUE_APP_( 開頭 )，可以通過process. env. VUE_APP_XX得到；
? ? 2、在webpack中獲取變量 process. env. xxx
? ? 3、在public/index.html中使用的? ??<link rel="icon" href="<%= BASE_URL %>favicon.ico">
模式 mode
在vue-cli 中有三種模式
? ? 1、development：在vue-cli-service serve下，即開發(fā)環(huán)境使用
? ? 2、production：在vue-cli-service build和vue-cli-service test:e2e下，即正式環(huán)境使用
? ? 3、test： 在vue-cli-service test:unit下使用
? ??另外，如果你想要修改模式下默認(rèn)的環(huán)境變量的話可以通過--mode來實(shí)現(xiàn)，例如：
"dev-build":"vue-cli-service build --mode development"
這里聲明的NODE_ENV = ‘development’用來表示這是生產(chǎn)環(huán)境。VUE_APP_CURRENTMODE為項(xiàng)目變量，publicPath為除數(shù)打包后文件的地址。
在vue.config.js中使用環(huán)境變量，制定輸出文件為環(huán)境變量配置的文件：
publicPath:對(duì)應(yīng)你自己的環(huán)境path
