Vue官方腳手架分環境打包配置及介面環境切換

1、配置各個環境所需要的使用的引數

//修改config/dev.env.js (開發環境)

'use strict'
const merge = require('webpack-merge')
const prodenv = require('./prod.env')
module.exports = merge(prodenv, )
//修改config/prod.env.js(生產環境)
'use strict'
module.exports =

2、打包配置

//修改build/webpack.prod.conf.js(npm run build 時會走這個檔案)

const env = process.env.node_env === 'testing'
? require('../config/test.env')
: require('../config/prod.env')
改為const env = require('../config/'+process.env.env_config+'.env')
new htmlwebpackplugin(,
// necessary to consistently work with multiple chunks via commonschunkplugin
chunkssortmode: 'dependency'
}),改為new htmlwebpackplugin(,
// necessary to consistently work with multiple chunks via commonschunkplugin
chunkssortmode: 'dependency'
}),

3、本地環境配置

//修改 build/webpack.dev.conf.js(npm run start 時走這裡)

//引入檔案
const env = require('../config/dev.env');//如果需要用生產環境把../config/dev.env改為../config/prod.env即可(專案需要重啟才能生效)
plugins: [
new webpack.defineplugin(),
改為plugins: [
new webpack.defineplugin(),

4、打包命令配置

//在package.json "scripts" 物件中新增以下內容

"build:prod": "cross-env node_env=production env_config=prod node build/build.js",
"build:dev": "cross-env node_env=production env_config=dev node build/build.js",

5、獲取配置好的全域性變數

//以下變數能獲取環境中的各個引數(任何檔案下可使用該變數)

process.env
列印以下內容

通過腳手架建立的vue專案實現分環境打包

1.建立三個配置檔案 分別是開發環境，測試環境，生產環境，如圖所示 三個檔案的內容分別為 env.development node env development env.test env.production 2.在專案中建立乙個config.js檔案 config.js檔案裡面的內容如下 let...

Vue腳手架的AJAX配置

sass基於node環境，故需要安裝node sass和sass loader 獲取dom元素 mydiv div this refs.mydivvue create 專案名 建立專案 src目錄 步驟 安裝axios包npm i axios s 在src目錄下建立requests資料夾，專門用來放...

安裝配置Vue腳手架

1，全域性安裝生成腳手架專案 npm i g vue cli 安裝的是3.0版本 g全域性 2，用命令列工具生成乙個專案的腳手架 和檔案結構 vue create 專案名 命名時不可以用大寫字母 2.1如果提示網路慢，是否用 映象 y 2.2選manually select features 2.3...