Merge 30d0ff0d44 into 9d8c7edf91
This commit is contained in:
RoBlues
GitHub
commit
a556ee788c
|
|
@ -4,6 +4,18 @@ ENV = 'development'
|
|||
# base api
|
||||
VUE_APP_BASE_API = '/dev-api'
|
||||
|
||||
# 用VUE_APP_MOCK配置如何使用Mock
|
||||
# 该值会被用在Vue.config.js和src/main.js中
|
||||
# 其取值和意义如下：
|
||||
# None - 表示不使用Mock或Mock-server,不配置意义相同
|
||||
# Mock - 表示使用mock
|
||||
# Mock_Server 表示使用Mock_Server。
|
||||
VUE_APP_MOCK = Mock
|
||||
|
||||
# Mock_Server Context 表示在使用Mock-Server时，它的应用context。
|
||||
# 该值会被用在vue.config.js和/mock/mock-server.js中
|
||||
VUE_APP_MOCK_SERVER_CONTEXT = /mock
|
||||
|
||||
# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
|
||||
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
|
||||
# It only does one thing by converting all import() to require().
|
||||
|
|
@ -12,3 +24,4 @@ VUE_APP_BASE_API = '/dev-api'
|
|||
# Detail: https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
|
||||
|
||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||
|
||||
|
|
|
|||
|
|
@ -4,3 +4,14 @@ ENV = 'production'
|
|||
# base api
|
||||
VUE_APP_BASE_API = '/prod-api'
|
||||
|
||||
# 用VUE_APP_MOCK配置如何使用Mock
|
||||
# 该值会被用在Vue.config.js和src/main.js中
|
||||
# 其取值和意义如下：
|
||||
# None - 表示不使用Mock或Mock-server,不配置意义相同
|
||||
# Mock - 表示使用mock
|
||||
# Mock_Server 表示使用Mock_Server。
|
||||
VUE_APP_MOCK = Mock
|
||||
|
||||
# Mock_Server Context 表示在使用Mock-Server时，它的应用context。
|
||||
# 该值会被用在vue.config.js和/mock/mock-server.js中
|
||||
VUE_APP_MOCK_SERVER_CONTEXT = /mock
|
||||
|
|
@ -33,8 +33,10 @@ function unregisterRoutes() {
|
|||
|
||||
// for mock server
|
||||
const responseFake = (url, type, respond) => {
|
||||
/** Mock-Server的Context */
|
||||
const MOCK_SERVER_CONTEXT = '^' + process.env.VUE_APP_MOCK_SERVER_CONTEXT
|
||||
return {
|
||||
url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`),
|
||||
url: new RegExp(`${MOCK_SERVER_CONTEXT}${url}`),
|
||||
type: type || 'get',
|
||||
response(req, res) {
|
||||
console.log('request invoke:' + req.path)
|
||||
|
|
|
|||
|
|
@ -27,7 +27,10 @@ import * as filters from './filters' // global filters
|
|||
* Currently MockJs will be used in the production environment,
|
||||
* please remove it before going online ! ! !
|
||||
*/
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
/**
|
||||
* VUE_APP_MOCK is defined in .env.production or .env.development
|
||||
*/
|
||||
if (process.env.VUE_APP_MOCK === 'Mock') {
|
||||
const { mockXHR } = require('../mock')
|
||||
mockXHR()
|
||||
}
|
||||
|
|
|
|||
241
vue.config.js
241
vue.config.js
|
|
@ -15,114 +15,151 @@ const name = defaultSettings.title || 'vue Element Admin' // page title
|
|||
// port = 9527 npm run dev OR npm run dev --port = 9527
|
||||
const port = process.env.port || process.env.npm_config_port || 9527 // dev port
|
||||
|
||||
// All configuration item explanations can be find in https://cli.vuejs.org/config/
|
||||
module.exports = {
|
||||
/** mock-server开关,该环境变量定义在文件`.env.development`中*/
|
||||
const enableMockServer = process.env.VUE_APP_MOCK === 'Mock_Server'
|
||||
const mockServerContext = process.env.VUE_APP_MOCK_SERVER_CONTEXT
|
||||
const mockProxy = {
|
||||
/**
|
||||
* You will need to set publicPath if you plan to deploy your site under a sub path,
|
||||
* for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
|
||||
* then publicPath should be set to "/bar/".
|
||||
* In most cases please use '/' !!!
|
||||
* Detail: https://cli.vuejs.org/config/#publicpath
|
||||
* dev-api/login => mock/login
|
||||
* 本对象是express的代理插件http-proxy-middlewaredre
|
||||
* (https://github.com/chimurai/http-proxy-middleware)
|
||||
* 当方法是POST时，数据无法从原始请求传到代理请求，见下帖
|
||||
* https://github.com/chimurai/http-proxy-middleware/issues/40
|
||||
* 解决办法是在它的onProxyReq事件中，手动把请求的body数据搬运到代理请求中
|
||||
*
|
||||
* target是指匹配该路径的主机。见https://webpack.js.org/configuration/dev-server/#devserverproxy
|
||||
*/
|
||||
publicPath: '/',
|
||||
outputDir: 'dist',
|
||||
assetsDir: 'static',
|
||||
lintOnSave: process.env.NODE_ENV === 'development',
|
||||
productionSourceMap: false,
|
||||
devServer: {
|
||||
port: port,
|
||||
open: true,
|
||||
overlay: {
|
||||
warnings: false,
|
||||
errors: true
|
||||
},
|
||||
before: require('./mock/mock-server.js')
|
||||
},
|
||||
configureWebpack: {
|
||||
// provide the app's title in webpack's name field, so that
|
||||
// it can be accessed in index.html to inject the correct title.
|
||||
name: name,
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve('src')
|
||||
[process.env.VUE_APP_BASE_API]: {
|
||||
target: `http://localhost:${port}`,
|
||||
changeOrigin: true,
|
||||
ws: true, // proxy websockets
|
||||
pathRewrite: { ['^' + process.env.VUE_APP_BASE_API]: mockServerContext },
|
||||
/** 在POST方法下，直接把body数据以JSON形式搬运到代理请求对象proxyRequest中去 */
|
||||
onProxyReq: (proxyRequest, request, response, options) => {
|
||||
if (request.method === 'POST' && request.body) {
|
||||
const bodyData = JSON.stringify(request.body)
|
||||
proxyRequest.setHeader('Content-Type', 'application/json')
|
||||
proxyRequest.setHeader('Content-Length', Buffer.byteLength(bodyData))
|
||||
proxyRequest.write(bodyData)
|
||||
}
|
||||
}
|
||||
},
|
||||
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/icons'))
|
||||
.end()
|
||||
config.module
|
||||
.rule('icons')
|
||||
.test(/\.svg$/)
|
||||
.include.add(resolve('src/icons'))
|
||||
.end()
|
||||
.use('svg-sprite-loader')
|
||||
.loader('svg-sprite-loader')
|
||||
.options({
|
||||
symbolId: 'icon-[name]'
|
||||
})
|
||||
.end()
|
||||
// All configuration item explanations can be find in https://cli.vuejs.org/config/
|
||||
module.exports = () => {
|
||||
return {
|
||||
/**
|
||||
* You will need to set publicPath if you plan to deploy your site under a sub path,
|
||||
* for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
|
||||
* then publicPath should be set to "/bar/".
|
||||
* In most cases please use '/' !!!
|
||||
* Detail: https://cli.vuejs.org/config/#publicpath
|
||||
*/
|
||||
publicPath: '/',
|
||||
outputDir: 'dist',
|
||||
assetsDir: 'static',
|
||||
lintOnSave: process.env.NODE_ENV === 'development',
|
||||
productionSourceMap: false,
|
||||
devServer: {
|
||||
port: port,
|
||||
open: true,
|
||||
overlay: {
|
||||
warnings: false,
|
||||
errors: true
|
||||
},
|
||||
|
||||
// set preserveWhitespace
|
||||
config.module
|
||||
.rule('vue')
|
||||
.use('vue-loader')
|
||||
.loader('vue-loader')
|
||||
.tap(options => {
|
||||
options.compilerOptions.preserveWhitespace = true
|
||||
return options
|
||||
})
|
||||
.end()
|
||||
|
||||
config
|
||||
// https://webpack.js.org/configuration/devtool/#development
|
||||
.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', [{
|
||||
// `runtime` must same as runtimeChunk name. default is `runtime`
|
||||
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')
|
||||
proxy: enableMockServer ? mockProxy : undefined,
|
||||
/** 启动mock服务器 */
|
||||
/** @link https://webpack.js.org/configuration/dev-server/#devserverbefore*/
|
||||
/** before定义为function (app)。其中app指的是express的app */
|
||||
before: enableMockServer ? require('./mock/mock-server.js').default : undefined
|
||||
},
|
||||
configureWebpack: {
|
||||
// provide the app's title in webpack's name field, so that
|
||||
// it can be accessed in index.html to inject the correct title.
|
||||
name: name,
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve('src')
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
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/icons'))
|
||||
.end()
|
||||
config.module
|
||||
.rule('icons')
|
||||
.test(/\.svg$/)
|
||||
.include.add(resolve('src/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
|
||||
// https://webpack.js.org/configuration/devtool/#development
|
||||
.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', [{
|
||||
// `runtime` must same as runtimeChunk name. default is `runtime`
|
||||
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')
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue