先看文件夹目录:重点是config文件夹下的配置,.gitignore,vue.config.js文件
要把vue项目跟后台对接接口api单独提出来,首先对vue.config.js进行改造:把proxy单独提出来
vue.config.js:
'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')
const proxy = require('./config/proxy/index.js')//这一行是重点
function resolve(dir) {
return path.join(__dirname, dir)
}
const name = defaultSettings.title // 网址标题
const port = 8013 // 端口配置
module.exports = {
// hash 模式下可使用
// publicPath: process.env.NODE_ENV === 'development' ? '/' : './',
publicPath: '/',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
devServer: {
port: port,
open: false,
overlay: {
warnings: false,
errors: true
},
proxy: proxy//这一行是重点
},
configureWebpack: {
name: name,
resolve: {
alias: {
'@': resolve('src'),
'@crud': resolve('src/components/Crud')
}
}
},
chainWebpack(config) {
config.plugins.delete('preload') // TODO: need test
config.plugins.delete('prefetch') // TODO: need test
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/assets/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
// set preserveWhitespace
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.compilerOptions.preserveWhitespace = true
return options
})
.end()
config
.when(process.env.NODE_ENV === 'development',
config => config.devtool('cheap-source-map')
)
config
.when(process.env.NODE_ENV !== 'development',
config => {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [{
inline: /runtime\..*\.js$/
}])
.end()
config
.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // only package third parties that are initially dependent
},
elementUI: {
name: 'chunk-elementUI', // split elementUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true
}
}
})
config.optimization.runtimeChunk('single')
}
)
},
transpileDependencies: [
'vue-echarts',
'resize-detector'
]
}
config/proxy/index.js:
const fs = require('fs')
const getFileUrl = fileName => `./config/proxy/${fileName}`
const LOCAL_FILE_NAME = 'proxy.dev.local.js'//本地配置文件名称
// 本地的开发环境变量配置文件,属于gitignore
const localFileUrl = getFileUrl(LOCAL_FILE_NAME)
// 默认请求
const apiHost = {
rewrite: process.env.VUE_APP_BASE_API,
target: 'http://192.xxx.xxx.xxx:8080'
}
let proxyList = []
function getProxies(PROXY_LIST = []) {
const res = {}
PROXY_LIST.forEach(proxyItem => {
let source = proxyItem.rewrite
if (source && source.charAt(source.length - 1) === '/') {
source = source.substring(0, source.length - 1)
}
res[source] = {
target: proxyItem.target,
changeOrigin: true,
pathRewrite: {
['^' + source]: ''
}
}
})
return res
}
// 核心代码,通过模板(proxy.dev.tpl)创建自己本地的配置文件
// 本地的开发配置文件不存在,则创建并初始化为空的
if (!fs.existsSync(localFileUrl)) {
fs.copyFile(getFileUrl('proxy.dev.tpl'), localFileUrl, err => {
const isFail = !!err
console.warn(`\n[${isFail ? 'warn' : 'info'}]config/proxy.js: 创建${localFileUrl}${isFail ? `失败,${err.stack}` : '成功'}`)
})
proxyList.push(apiHost)
} else {
// 当存在时获取proxy配置
proxyList = require(`./${LOCAL_FILE_NAME}`)
}
const proxy = getProxies(proxyList)
module.exports = proxy
config/proxy/proxy.dev.tpl:
模板:
const proxyList = [
{
rewrite: process.env.VUE_APP_BASE_API,
target: 'http://192.xxx.xxx.xxx:8080'
}
]
module.exports = proxyList
第一次运行,创建下边的文件,该文件是自己本地的配置文件,每个人拥有自己的配置文件,该文件不会被提交,不会有代码冲突
.gitignore文件:提交的时候不提交自己本地使用的配置文件