vue腳手架 build-config文件夾（跨域/打包）相關配置

1,跨域解決

點開config文件夾下的index.js文件

找到 proxyTable（英文：代理-表格）下進行配置，如下（路徑配置必須絕對路徑）

build:{ // production 環境

env: require('./prod.env'), // 使用 config/prod.env.js 中定義的編譯環境

index: path.resolve(__dirname, '../dist/index.html'), // 編譯輸入的 index.html 文件

assetsRoot: path.resolve(__dirname, '../dist'), // 編譯輸出的靜態資源路徑

assetsSubDirectory: 'static', // 編譯時輸出的二級目錄（dist->static）

assetsPublicPath: '/', // 編譯發布的根目錄，可配置為資源服務器域名或 CDN 域名

productionSourceMap: true, // 是否開啟 cssSourceMap

productionGzip: false, // 是否開啟 gzip

productionGzipExtensions: ['js', 'css'] // 需要使用 gzip 壓縮的文件擴展名

},

dev: { // dev 環境

env: require('./dev.env'), // 使用 config/dev.env.js 中定義的編譯環境

port: 8080, // 運行測試頁面的端口

assetsSubDirectory: 'static', // 編譯輸出的二級目錄

assetsPublicPath: '/', // 編譯發布的根目錄，可配置為資源服務器域名或 CDN 域名

proxyTable: {

'/xxxx': {

target: 'http://192.168.11.11/xxxxx', // 接口的域名

// secure: false, // 如果是https接口，需要配置這個參數

changeOrigin: true, // 如果接口跨域，需要進行這個參數配置

pathRewrite: {

'^/xxxxxx': '/'

}

},

}, // 需要 proxyTable 代理的接口（可跨域）

cssSourceMap: false // 是否開啟 cssSourceMap

}

頁面調用

let JAVA2API = 'xxxxx'
    export default {
      name: "CustomerNew",
      data() {
        return {
　　　　　　JAVA2API, 
　　　　} 
　　} 

 

 

 

 

打包配置

一個項目的開發調試過程肯定不止開發環境和生產環境，由於缺少環境常量，我們就常常需要手動修改URL，進而導致如果項目存在多個環境時，多出的環境沒辦法自動化構建

可以通過webpack進行配置，下面是自己理解的圖

 

 

添加env-config.js文件

我們可以利用process對象，獲取啟動Node.js進程時的命令行參數（process.argv）,匹配當前開發或生產的環境常量掛載到process.env。

env-config.js

/*
 @多環境開發配置 by haibao
 使用方法示例：
 ----打包：
   打包dev環境：npm run build --dev
   打包test環境：npm run build --test
   打包pro環境：npm run build --pro
 ----本地運行：
   本地運行dev環境：npm run dev --dev
   本地運行test環境：npm run dev --test
   無【--xxx】參數，則默認為dev環境：npm run dev
 */
'use strict'

const chalk = require('chalk')
// const path = require('path')
/*
 * 環境列表，第一個環境為默認環境
 * @envName: 指明現在使用的環境
 * @baseUrl: 這個環境下面的api 請求的域名
 * */
const ENV_LIST = [
  {
    // 開發環境
    envName: 'dev',
    baseUrl: '/xxxxx',
  },
  {
    // 測試環境
    envName: 'test',
    baseUrl: '/xxxxx,
  },
  {
    // 生產環境（命令行參數（process.arg）中prod是保留字，所以使用pro）
    envName: 'pro',
    baseUrl: '/xxxxx',
  }
]
// 獲取命令行參數: http://nodejs.cn/api/process.html#process_process_argv
//利用process對象，獲取啟動Node.js進程時的命令行參數（process.argv）,匹配當前開發或生產的環境常量掛載到process.env。
const argv = JSON.parse(process.env.npm_config_argv).original || process.argv
const HOST_ENV = argv[2] ? argv[2].replace(/[^a-z]+/ig, '') : 'dev'
// 沒有設置環境，則默認為第一個
const HOST_CONF = HOST_ENV ? ENV_LIST.find(item => item.envName === HOST_ENV) : ENV_LIST[0]
// 把環境常量掛載到process.env方便客戶端使用
process.env.BASE_URL = HOST_CONF.baseUrl
// log選中的變量
console.log(chalk.green('當前環境對應的常量：'))
console.log(HOST_CONF)

module.exports = {
  HOST_CONF,
  ENV_LIST
}

 

然后分別在webpack.dev.conf.js / webpack.prod.conf.js 配置變量 位置在

plugins：[]下的

new webpack.DefinePlugin方法

如下配置  plugins: [ // http://vuejs.github.io/vue-loader/en/workflow/production.html new webpack.DefinePlugin({ 'process.env.BASE_URL': '\"' + process.env.BASE_URL + '\"',}), ] 

兩個文件配制方法相同

 

然后打開發環境的包就敲 npm run build 

測試環境  npm run build --test

生產環境 npm run build --pro