[release]4.1.0 (#211)
花裤衩
7 years ago
committed by
GitHub
parent
4bbdf5ee0e
commit
a5d4bbda75
@ -1,12 +0,0 @@
|
|||||||
{
|
|
||||||
"presets": [
|
|
||||||
["env", {
|
|
||||||
"modules": false,
|
|
||||||
"targets": {
|
|
||||||
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
"stage-2"
|
|
||||||
],
|
|
||||||
"plugins":["transform-vue-jsx", "transform-runtime"]
|
|
||||||
}
|
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
# just a flag
|
||||||
|
ENV = 'development'
|
||||||
|
|
||||||
|
# base api
|
||||||
|
VUE_APP_BASE_API = '/dev-api'
|
||||||
|
|
||||||
|
# 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().
|
||||||
|
# This configuration can significantly increase the speed of hot updates,
|
||||||
|
# when you have a large number of pages.
|
||||||
|
# Detail: https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
|
||||||
|
|
||||||
|
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
# just a flag
|
||||||
|
ENV = 'production'
|
||||||
|
|
||||||
|
# base api
|
||||||
|
VUE_APP_BASE_API = '/prod-api'
|
||||||
|
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
NODE_ENV = production
|
||||||
|
|
||||||
|
# just a flag
|
||||||
|
ENV = 'staging'
|
||||||
|
|
||||||
|
# base api
|
||||||
|
VUE_APP_BASE_API = '/stage-api'
|
||||||
|
|
||||||
@ -1,3 +1,4 @@
|
|||||||
build/*.js
|
build/*.js
|
||||||
config/*.js
|
|
||||||
src/assets
|
src/assets
|
||||||
|
public
|
||||||
|
dist
|
||||||
|
|||||||
@ -1,10 +1,8 @@
|
|||||||
// https://github.com/michael-ciniawsky/postcss-load-config
|
// https://github.com/michael-ciniawsky/postcss-load-config
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
"plugins": {
|
'plugins': {
|
||||||
"postcss-import": {},
|
|
||||||
"postcss-url": {},
|
|
||||||
// to edit target browsers: use "browserslist" field in package.json
|
// to edit target browsers: use "browserslist" field in package.json
|
||||||
"autoprefixer": {}
|
'autoprefixer': {}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/app'
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -1,45 +0,0 @@
|
|||||||
'use strict'
|
|
||||||
require('./check-versions')()
|
|
||||||
|
|
||||||
process.env.NODE_ENV = 'production'
|
|
||||||
|
|
||||||
const ora = require('ora')
|
|
||||||
const rm = require('rimraf')
|
|
||||||
const path = require('path')
|
|
||||||
const chalk = require('chalk')
|
|
||||||
const webpack = require('webpack')
|
|
||||||
const config = require('../config')
|
|
||||||
const webpackConfig = require('./webpack.prod.conf')
|
|
||||||
|
|
||||||
const spinner = ora('building for production...')
|
|
||||||
spinner.start()
|
|
||||||
|
|
||||||
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
|
|
||||||
if (err) throw err
|
|
||||||
webpack(webpackConfig, (err, stats) => {
|
|
||||||
spinner.stop()
|
|
||||||
if (err) throw err
|
|
||||||
process.stdout.write(
|
|
||||||
stats.toString({
|
|
||||||
colors: true,
|
|
||||||
modules: false,
|
|
||||||
children: false,
|
|
||||||
chunks: false,
|
|
||||||
chunkModules: false
|
|
||||||
}) + '\n\n'
|
|
||||||
)
|
|
||||||
|
|
||||||
if (stats.hasErrors()) {
|
|
||||||
console.log(chalk.red(' Build failed with errors.\n'))
|
|
||||||
process.exit(1)
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(chalk.cyan(' Build complete.\n'))
|
|
||||||
console.log(
|
|
||||||
chalk.yellow(
|
|
||||||
' Tip: built files are meant to be served over an HTTP server.\n' +
|
|
||||||
" Opening index.html over file:// won't work.\n"
|
|
||||||
)
|
|
||||||
)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@ -1,64 +0,0 @@
|
|||||||
'use strict'
|
|
||||||
const chalk = require('chalk')
|
|
||||||
const semver = require('semver')
|
|
||||||
const packageConfig = require('../package.json')
|
|
||||||
const shell = require('shelljs')
|
|
||||||
|
|
||||||
function exec(cmd) {
|
|
||||||
return require('child_process')
|
|
||||||
.execSync(cmd)
|
|
||||||
.toString()
|
|
||||||
.trim()
|
|
||||||
}
|
|
||||||
|
|
||||||
const versionRequirements = [
|
|
||||||
{
|
|
||||||
name: 'node',
|
|
||||||
currentVersion: semver.clean(process.version),
|
|
||||||
versionRequirement: packageConfig.engines.node
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
if (shell.which('npm')) {
|
|
||||||
versionRequirements.push({
|
|
||||||
name: 'npm',
|
|
||||||
currentVersion: exec('npm --version'),
|
|
||||||
versionRequirement: packageConfig.engines.npm
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = function() {
|
|
||||||
const warnings = []
|
|
||||||
|
|
||||||
for (let i = 0; i < versionRequirements.length; i++) {
|
|
||||||
const mod = versionRequirements[i]
|
|
||||||
|
|
||||||
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
|
|
||||||
warnings.push(
|
|
||||||
mod.name +
|
|
||||||
': ' +
|
|
||||||
chalk.red(mod.currentVersion) +
|
|
||||||
' should be ' +
|
|
||||||
chalk.green(mod.versionRequirement)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (warnings.length) {
|
|
||||||
console.log('')
|
|
||||||
console.log(
|
|
||||||
chalk.yellow(
|
|
||||||
'To use this template, you must update following to modules:'
|
|
||||||
)
|
|
||||||
)
|
|
||||||
console.log()
|
|
||||||
|
|
||||||
for (let i = 0; i < warnings.length; i++) {
|
|
||||||
const warning = warnings[i]
|
|
||||||
console.log(' ' + warning)
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log()
|
|
||||||
process.exit(1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
const { run } = require('runjs')
|
||||||
|
const chalk = require('chalk')
|
||||||
|
const config = require('../vue.config.js')
|
||||||
|
const rawArgv = process.argv.slice(2)
|
||||||
|
const args = rawArgv.join(' ')
|
||||||
|
|
||||||
|
if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
|
||||||
|
const report = rawArgv.includes('--report')
|
||||||
|
|
||||||
|
run(`vue-cli-service build ${args}`)
|
||||||
|
|
||||||
|
const port = 9526
|
||||||
|
const publicPath = config.publicPath
|
||||||
|
|
||||||
|
var connect = require('connect')
|
||||||
|
var serveStatic = require('serve-static')
|
||||||
|
const app = connect()
|
||||||
|
|
||||||
|
app.use(
|
||||||
|
publicPath,
|
||||||
|
serveStatic('./dist', {
|
||||||
|
index: ['index.html', '/']
|
||||||
|
})
|
||||||
|
)
|
||||||
|
|
||||||
|
app.listen(port, function () {
|
||||||
|
console.log(chalk.green(`> Preview at http://localhost:${port}${publicPath}`))
|
||||||
|
if (report) {
|
||||||
|
console.log(chalk.green(`> Report at http://localhost:${port}${publicPath}report.html`))
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
run(`vue-cli-service build ${args}`)
|
||||||
|
}
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,108 +0,0 @@
|
|||||||
'use strict'
|
|
||||||
const path = require('path')
|
|
||||||
const config = require('../config')
|
|
||||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
|
||||||
const packageConfig = require('../package.json')
|
|
||||||
|
|
||||||
exports.assetsPath = function(_path) {
|
|
||||||
const assetsSubDirectory =
|
|
||||||
process.env.NODE_ENV === 'production'
|
|
||||||
? config.build.assetsSubDirectory
|
|
||||||
: config.dev.assetsSubDirectory
|
|
||||||
|
|
||||||
return path.posix.join(assetsSubDirectory, _path)
|
|
||||||
}
|
|
||||||
|
|
||||||
exports.cssLoaders = function(options) {
|
|
||||||
options = options || {}
|
|
||||||
|
|
||||||
const cssLoader = {
|
|
||||||
loader: 'css-loader',
|
|
||||||
options: {
|
|
||||||
sourceMap: options.sourceMap
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const postcssLoader = {
|
|
||||||
loader: 'postcss-loader',
|
|
||||||
options: {
|
|
||||||
sourceMap: options.sourceMap
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// generate loader string to be used with extract text plugin
|
|
||||||
function generateLoaders(loader, loaderOptions) {
|
|
||||||
const loaders = []
|
|
||||||
|
|
||||||
// Extract CSS when that option is specified
|
|
||||||
// (which is the case during production build)
|
|
||||||
if (options.extract) {
|
|
||||||
loaders.push(MiniCssExtractPlugin.loader)
|
|
||||||
} else {
|
|
||||||
loaders.push('vue-style-loader')
|
|
||||||
}
|
|
||||||
|
|
||||||
loaders.push(cssLoader)
|
|
||||||
|
|
||||||
if (options.usePostCSS) {
|
|
||||||
loaders.push(postcssLoader)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (loader) {
|
|
||||||
loaders.push({
|
|
||||||
loader: loader + '-loader',
|
|
||||||
options: Object.assign({}, loaderOptions, {
|
|
||||||
sourceMap: options.sourceMap
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return loaders
|
|
||||||
}
|
|
||||||
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
|
|
||||||
return {
|
|
||||||
css: generateLoaders(),
|
|
||||||
postcss: generateLoaders(),
|
|
||||||
less: generateLoaders('less'),
|
|
||||||
sass: generateLoaders('sass', {
|
|
||||||
indentedSyntax: true
|
|
||||||
}),
|
|
||||||
scss: generateLoaders('sass'),
|
|
||||||
stylus: generateLoaders('stylus'),
|
|
||||||
styl: generateLoaders('stylus')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Generate loaders for standalone style files (outside of .vue)
|
|
||||||
exports.styleLoaders = function(options) {
|
|
||||||
const output = []
|
|
||||||
const loaders = exports.cssLoaders(options)
|
|
||||||
|
|
||||||
for (const extension in loaders) {
|
|
||||||
const loader = loaders[extension]
|
|
||||||
output.push({
|
|
||||||
test: new RegExp('\\.' + extension + '$'),
|
|
||||||
use: loader
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return output
|
|
||||||
}
|
|
||||||
|
|
||||||
exports.createNotifierCallback = () => {
|
|
||||||
const notifier = require('node-notifier')
|
|
||||||
|
|
||||||
return (severity, errors) => {
|
|
||||||
if (severity !== 'error') return
|
|
||||||
|
|
||||||
const error = errors[0]
|
|
||||||
const filename = error.file && error.file.split('!').pop()
|
|
||||||
|
|
||||||
notifier.notify({
|
|
||||||
title: packageConfig.name,
|
|
||||||
message: severity + ': ' + error.name,
|
|
||||||
subtitle: filename || '',
|
|
||||||
icon: path.join(__dirname, 'logo.png')
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
'use strict'
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
//You can set the vue-loader configuration by yourself.
|
|
||||||
}
|
|
||||||
@ -1,108 +0,0 @@
|
|||||||
'use strict'
|
|
||||||
const path = require('path')
|
|
||||||
const utils = require('./utils')
|
|
||||||
const config = require('../config')
|
|
||||||
const { VueLoaderPlugin } = require('vue-loader')
|
|
||||||
const vueLoaderConfig = require('./vue-loader.conf')
|
|
||||||
|
|
||||||
function resolve(dir) {
|
|
||||||
return path.join(__dirname, '..', dir)
|
|
||||||
}
|
|
||||||
|
|
||||||
const createLintingRule = () => ({
|
|
||||||
test: /\.(js|vue)$/,
|
|
||||||
loader: 'eslint-loader',
|
|
||||||
enforce: 'pre',
|
|
||||||
include: [resolve('src'), resolve('test')],
|
|
||||||
options: {
|
|
||||||
formatter: require('eslint-friendly-formatter'),
|
|
||||||
emitWarning: !config.dev.showEslintErrorsInOverlay
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
context: path.resolve(__dirname, '../'),
|
|
||||||
entry: {
|
|
||||||
app: './src/main.js'
|
|
||||||
},
|
|
||||||
output: {
|
|
||||||
path: config.build.assetsRoot,
|
|
||||||
filename: '[name].js',
|
|
||||||
publicPath:
|
|
||||||
process.env.NODE_ENV === 'production'
|
|
||||||
? config.build.assetsPublicPath
|
|
||||||
: config.dev.assetsPublicPath
|
|
||||||
},
|
|
||||||
resolve: {
|
|
||||||
extensions: ['.js', '.vue', '.json'],
|
|
||||||
alias: {
|
|
||||||
'@': resolve('src')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
module: {
|
|
||||||
rules: [
|
|
||||||
...(config.dev.useEslint ? [createLintingRule()] : []),
|
|
||||||
{
|
|
||||||
test: /\.vue$/,
|
|
||||||
loader: 'vue-loader',
|
|
||||||
options: vueLoaderConfig
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.js$/,
|
|
||||||
loader: 'babel-loader',
|
|
||||||
include: [
|
|
||||||
resolve('src'),
|
|
||||||
resolve('test'),
|
|
||||||
resolve('mock'),
|
|
||||||
resolve('node_modules/webpack-dev-server/client')
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.svg$/,
|
|
||||||
loader: 'svg-sprite-loader',
|
|
||||||
include: [resolve('src/icons')],
|
|
||||||
options: {
|
|
||||||
symbolId: 'icon-[name]'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
|
|
||||||
loader: 'url-loader',
|
|
||||||
exclude: [resolve('src/icons')],
|
|
||||||
options: {
|
|
||||||
limit: 10000,
|
|
||||||
name: utils.assetsPath('img/[name].[hash:7].[ext]')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
|
|
||||||
loader: 'url-loader',
|
|
||||||
options: {
|
|
||||||
limit: 10000,
|
|
||||||
name: utils.assetsPath('media/[name].[hash:7].[ext]')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
|
|
||||||
loader: 'url-loader',
|
|
||||||
options: {
|
|
||||||
limit: 10000,
|
|
||||||
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
plugins: [new VueLoaderPlugin()],
|
|
||||||
node: {
|
|
||||||
// prevent webpack from injecting useless setImmediate polyfill because Vue
|
|
||||||
// source contains it (although only uses it if it's native).
|
|
||||||
setImmediate: false,
|
|
||||||
// prevent webpack from injecting mocks to Node native modules
|
|
||||||
// that does not make sense for the client
|
|
||||||
dgram: 'empty',
|
|
||||||
fs: 'empty',
|
|
||||||
net: 'empty',
|
|
||||||
tls: 'empty',
|
|
||||||
child_process: 'empty'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,95 +0,0 @@
|
|||||||
'use strict'
|
|
||||||
const path = require('path')
|
|
||||||
const utils = require('./utils')
|
|
||||||
const webpack = require('webpack')
|
|
||||||
const config = require('../config')
|
|
||||||
const merge = require('webpack-merge')
|
|
||||||
const baseWebpackConfig = require('./webpack.base.conf')
|
|
||||||
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
|
||||||
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
|
|
||||||
const portfinder = require('portfinder')
|
|
||||||
|
|
||||||
function resolve(dir) {
|
|
||||||
return path.join(__dirname, '..', dir)
|
|
||||||
}
|
|
||||||
|
|
||||||
const HOST = process.env.HOST
|
|
||||||
const PORT = process.env.PORT && Number(process.env.PORT)
|
|
||||||
|
|
||||||
const devWebpackConfig = merge(baseWebpackConfig, {
|
|
||||||
mode: 'development',
|
|
||||||
module: {
|
|
||||||
rules: utils.styleLoaders({
|
|
||||||
sourceMap: config.dev.cssSourceMap,
|
|
||||||
usePostCSS: true
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// cheap-module-eval-source-map is faster for development
|
|
||||||
devtool: config.dev.devtool,
|
|
||||||
|
|
||||||
// these devServer options should be customized in /config/index.js
|
|
||||||
devServer: {
|
|
||||||
clientLogLevel: 'warning',
|
|
||||||
historyApiFallback: true,
|
|
||||||
hot: true,
|
|
||||||
compress: true,
|
|
||||||
host: HOST || config.dev.host,
|
|
||||||
port: PORT || config.dev.port,
|
|
||||||
open: config.dev.autoOpenBrowser,
|
|
||||||
overlay: config.dev.errorOverlay
|
|
||||||
? { warnings: false, errors: true }
|
|
||||||
: false,
|
|
||||||
publicPath: config.dev.assetsPublicPath,
|
|
||||||
proxy: config.dev.proxyTable,
|
|
||||||
quiet: true, // necessary for FriendlyErrorsPlugin
|
|
||||||
watchOptions: {
|
|
||||||
poll: config.dev.poll
|
|
||||||
}
|
|
||||||
},
|
|
||||||
plugins: [
|
|
||||||
new webpack.DefinePlugin({
|
|
||||||
'process.env': require('../config/dev.env')
|
|
||||||
}),
|
|
||||||
new webpack.HotModuleReplacementPlugin(),
|
|
||||||
// https://github.com/ampedandwired/html-webpack-plugin
|
|
||||||
new HtmlWebpackPlugin({
|
|
||||||
filename: 'index.html',
|
|
||||||
template: 'index.html',
|
|
||||||
inject: true,
|
|
||||||
favicon: resolve('favicon.ico'),
|
|
||||||
title: 'vue-admin-template'
|
|
||||||
})
|
|
||||||
]
|
|
||||||
})
|
|
||||||
|
|
||||||
module.exports = new Promise((resolve, reject) => {
|
|
||||||
portfinder.basePort = process.env.PORT || config.dev.port
|
|
||||||
portfinder.getPort((err, port) => {
|
|
||||||
if (err) {
|
|
||||||
reject(err)
|
|
||||||
} else {
|
|
||||||
// publish the new Port, necessary for e2e tests
|
|
||||||
process.env.PORT = port
|
|
||||||
// add port to devServer config
|
|
||||||
devWebpackConfig.devServer.port = port
|
|
||||||
|
|
||||||
// Add FriendlyErrorsPlugin
|
|
||||||
devWebpackConfig.plugins.push(
|
|
||||||
new FriendlyErrorsPlugin({
|
|
||||||
compilationSuccessInfo: {
|
|
||||||
messages: [
|
|
||||||
`Your application is running here: http://${
|
|
||||||
devWebpackConfig.devServer.host
|
|
||||||
}:${port}`
|
|
||||||
]
|
|
||||||
},
|
|
||||||
onErrors: config.dev.notifyOnErrors
|
|
||||||
? utils.createNotifierCallback()
|
|
||||||
: undefined
|
|
||||||
})
|
|
||||||
)
|
|
||||||
|
|
||||||
resolve(devWebpackConfig)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@ -1,177 +0,0 @@
|
|||||||
'use strict'
|
|
||||||
const path = require('path')
|
|
||||||
const utils = require('./utils')
|
|
||||||
const webpack = require('webpack')
|
|
||||||
const config = require('../config')
|
|
||||||
const merge = require('webpack-merge')
|
|
||||||
const baseWebpackConfig = require('./webpack.base.conf')
|
|
||||||
const CopyWebpackPlugin = require('copy-webpack-plugin')
|
|
||||||
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
|
||||||
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
|
|
||||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
|
||||||
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
|
|
||||||
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
|
|
||||||
|
|
||||||
function resolve(dir) {
|
|
||||||
return path.join(__dirname, '..', dir)
|
|
||||||
}
|
|
||||||
|
|
||||||
const env = require('../config/prod.env')
|
|
||||||
|
|
||||||
// For NamedChunksPlugin
|
|
||||||
const seen = new Set()
|
|
||||||
const nameLength = 4
|
|
||||||
|
|
||||||
const webpackConfig = merge(baseWebpackConfig, {
|
|
||||||
mode: 'production',
|
|
||||||
module: {
|
|
||||||
rules: utils.styleLoaders({
|
|
||||||
sourceMap: config.build.productionSourceMap,
|
|
||||||
extract: true,
|
|
||||||
usePostCSS: true
|
|
||||||
})
|
|
||||||
},
|
|
||||||
devtool: config.build.productionSourceMap ? config.build.devtool : false,
|
|
||||||
output: {
|
|
||||||
path: config.build.assetsRoot,
|
|
||||||
filename: utils.assetsPath('js/[name].[chunkhash:8].js'),
|
|
||||||
chunkFilename: utils.assetsPath('js/[name].[chunkhash:8].js')
|
|
||||||
},
|
|
||||||
plugins: [
|
|
||||||
// http://vuejs.github.io/vue-loader/en/workflow/production.html
|
|
||||||
new webpack.DefinePlugin({
|
|
||||||
'process.env': env
|
|
||||||
}),
|
|
||||||
// extract css into its own file
|
|
||||||
new MiniCssExtractPlugin({
|
|
||||||
filename: utils.assetsPath('css/[name].[contenthash:8].css'),
|
|
||||||
chunkFilename: utils.assetsPath('css/[name].[contenthash:8].css')
|
|
||||||
}),
|
|
||||||
// generate dist index.html with correct asset hash for caching.
|
|
||||||
// you can customize output by editing /index.html
|
|
||||||
// see https://github.com/ampedandwired/html-webpack-plugin
|
|
||||||
new HtmlWebpackPlugin({
|
|
||||||
filename: config.build.index,
|
|
||||||
template: 'index.html',
|
|
||||||
inject: true,
|
|
||||||
favicon: resolve('favicon.ico'),
|
|
||||||
title: 'vue-admin-template',
|
|
||||||
minify: {
|
|
||||||
removeComments: true,
|
|
||||||
collapseWhitespace: true,
|
|
||||||
removeAttributeQuotes: true
|
|
||||||
// more options:
|
|
||||||
// https://github.com/kangax/html-minifier#options-quick-reference
|
|
||||||
}
|
|
||||||
// default sort mode uses toposort which cannot handle cyclic deps
|
|
||||||
// in certain cases, and in webpack 4, chunk order in HTML doesn't
|
|
||||||
// matter anyway
|
|
||||||
}),
|
|
||||||
new ScriptExtHtmlWebpackPlugin({
|
|
||||||
//`runtime` must same as runtimeChunk name. default is `runtime`
|
|
||||||
inline: /runtime\..*\.js$/
|
|
||||||
}),
|
|
||||||
// keep chunk.id stable when chunk has no name
|
|
||||||
new webpack.NamedChunksPlugin(chunk => {
|
|
||||||
if (chunk.name) {
|
|
||||||
return chunk.name
|
|
||||||
}
|
|
||||||
const modules = Array.from(chunk.modulesIterable)
|
|
||||||
if (modules.length > 1) {
|
|
||||||
const hash = require('hash-sum')
|
|
||||||
const joinedHash = hash(modules.map(m => m.id).join('_'))
|
|
||||||
let len = nameLength
|
|
||||||
while (seen.has(joinedHash.substr(0, len))) len++
|
|
||||||
seen.add(joinedHash.substr(0, len))
|
|
||||||
return `chunk-${joinedHash.substr(0, len)}`
|
|
||||||
} else {
|
|
||||||
return modules[0].id
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
// keep module.id stable when vender modules does not change
|
|
||||||
new webpack.HashedModuleIdsPlugin(),
|
|
||||||
// copy custom static assets
|
|
||||||
new CopyWebpackPlugin([
|
|
||||||
{
|
|
||||||
from: path.resolve(__dirname, '../static'),
|
|
||||||
to: config.build.assetsSubDirectory,
|
|
||||||
ignore: ['.*']
|
|
||||||
}
|
|
||||||
])
|
|
||||||
],
|
|
||||||
optimization: {
|
|
||||||
splitChunks: {
|
|
||||||
chunks: 'all',
|
|
||||||
cacheGroups: {
|
|
||||||
libs: {
|
|
||||||
name: 'chunk-libs',
|
|
||||||
test: /[\\/]node_modules[\\/]/,
|
|
||||||
priority: 10,
|
|
||||||
chunks: 'initial' // 只打包初始时依赖的第三方
|
|
||||||
},
|
|
||||||
elementUI: {
|
|
||||||
name: 'chunk-elementUI', // 单独将 elementUI 拆包
|
|
||||||
priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app
|
|
||||||
test: /[\\/]node_modules[\\/]element-ui[\\/]/
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
runtimeChunk: 'single',
|
|
||||||
minimizer: [
|
|
||||||
new UglifyJsPlugin({
|
|
||||||
uglifyOptions: {
|
|
||||||
mangle: {
|
|
||||||
safari10: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
sourceMap: config.build.productionSourceMap,
|
|
||||||
cache: true,
|
|
||||||
parallel: true
|
|
||||||
}),
|
|
||||||
// Compress extracted CSS. We are using this plugin so that possible
|
|
||||||
// duplicated CSS from different components can be deduped.
|
|
||||||
new OptimizeCSSAssetsPlugin()
|
|
||||||
]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
if (config.build.productionGzip) {
|
|
||||||
const CompressionWebpackPlugin = require('compression-webpack-plugin')
|
|
||||||
|
|
||||||
webpackConfig.plugins.push(
|
|
||||||
new CompressionWebpackPlugin({
|
|
||||||
algorithm: 'gzip',
|
|
||||||
test: new RegExp(
|
|
||||||
'\\.(' + config.build.productionGzipExtensions.join('|') + ')$'
|
|
||||||
),
|
|
||||||
threshold: 10240,
|
|
||||||
minRatio: 0.8
|
|
||||||
})
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (config.build.generateAnalyzerReport || config.build.bundleAnalyzerReport) {
|
|
||||||
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
|
|
||||||
.BundleAnalyzerPlugin
|
|
||||||
|
|
||||||
if (config.build.bundleAnalyzerReport) {
|
|
||||||
webpackConfig.plugins.push(
|
|
||||||
new BundleAnalyzerPlugin({
|
|
||||||
analyzerPort: 8080,
|
|
||||||
generateStatsFile: false
|
|
||||||
})
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (config.build.generateAnalyzerReport) {
|
|
||||||
webpackConfig.plugins.push(
|
|
||||||
new BundleAnalyzerPlugin({
|
|
||||||
analyzerMode: 'static',
|
|
||||||
reportFilename: 'bundle-report.html',
|
|
||||||
openAnalyzer: false
|
|
||||||
})
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = webpackConfig
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
'use strict'
|
|
||||||
const merge = require('webpack-merge')
|
|
||||||
const prodEnv = require('./prod.env')
|
|
||||||
|
|
||||||
module.exports = merge(prodEnv, {
|
|
||||||
NODE_ENV: '"development"',
|
|
||||||
BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
|
|
||||||
})
|
|
||||||
@ -1,86 +0,0 @@
|
|||||||
'use strict'
|
|
||||||
// Template version: 1.2.6
|
|
||||||
// see http://vuejs-templates.github.io/webpack for documentation.
|
|
||||||
|
|
||||||
const path = require('path')
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
dev: {
|
|
||||||
// Paths
|
|
||||||
assetsSubDirectory: 'static',
|
|
||||||
assetsPublicPath: '/',
|
|
||||||
proxyTable: {},
|
|
||||||
|
|
||||||
// Various Dev Server settings
|
|
||||||
host: 'localhost', // can be overwritten by process.env.HOST
|
|
||||||
port: 9528, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
|
|
||||||
autoOpenBrowser: true,
|
|
||||||
errorOverlay: true,
|
|
||||||
notifyOnErrors: false,
|
|
||||||
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
|
|
||||||
|
|
||||||
// Use Eslint Loader?
|
|
||||||
// If true, your code will be linted during bundling and
|
|
||||||
// linting errors and warnings will be shown in the console.
|
|
||||||
useEslint: true,
|
|
||||||
// If true, eslint errors and warnings will also be shown in the error overlay
|
|
||||||
// in the browser.
|
|
||||||
showEslintErrorsInOverlay: false,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Source Maps
|
|
||||||
*/
|
|
||||||
|
|
||||||
// https://webpack.js.org/configuration/devtool/#development
|
|
||||||
devtool: 'cheap-source-map',
|
|
||||||
|
|
||||||
// CSS Sourcemaps off by default because relative paths are "buggy"
|
|
||||||
// with this option, according to the CSS-Loader README
|
|
||||||
// (https://github.com/webpack/css-loader#sourcemaps)
|
|
||||||
// In our experience, they generally work as expected,
|
|
||||||
// just be aware of this issue when enabling this option.
|
|
||||||
cssSourceMap: false
|
|
||||||
},
|
|
||||||
|
|
||||||
build: {
|
|
||||||
// Template for index.html
|
|
||||||
index: path.resolve(__dirname, '../dist/index.html'),
|
|
||||||
|
|
||||||
// Paths
|
|
||||||
assetsRoot: path.resolve(__dirname, '../dist'),
|
|
||||||
assetsSubDirectory: 'static',
|
|
||||||
|
|
||||||
/**
|
|
||||||
* You can set by youself according to actual condition
|
|
||||||
* You will need to set this 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 assetsPublicPath should be set to "/bar/".
|
|
||||||
* In most cases please use '/' !!!
|
|
||||||
*/
|
|
||||||
assetsPublicPath: '/',
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Source Maps
|
|
||||||
*/
|
|
||||||
|
|
||||||
productionSourceMap: false,
|
|
||||||
// https://webpack.js.org/configuration/devtool/#production
|
|
||||||
devtool: 'source-map',
|
|
||||||
|
|
||||||
// Gzip off by default as many popular static hosts such as
|
|
||||||
// Surge or Netlify already gzip all static assets for you.
|
|
||||||
// Before setting to `true`, make sure to:
|
|
||||||
// npm install --save-dev compression-webpack-plugin
|
|
||||||
productionGzip: false,
|
|
||||||
productionGzipExtensions: ['js', 'css'],
|
|
||||||
|
|
||||||
// Run the build command with an extra argument to
|
|
||||||
// View the bundle analyzer report after build finishes:
|
|
||||||
// `npm run build --report`
|
|
||||||
// Set to `true` or `false` to always turn it on or off
|
|
||||||
bundleAnalyzerReport: process.env.npm_config_report || false,
|
|
||||||
|
|
||||||
// `npm run build:prod --generate_report`
|
|
||||||
generateAnalyzerReport: process.env.npm_config_generate_report || false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
'use strict'
|
|
||||||
module.exports = {
|
|
||||||
NODE_ENV: '"production"',
|
|
||||||
BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
|
|
||||||
}
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
||||||
<title>vue-admin-template</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
|
||||||
<!-- built files will be auto injected -->
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
module.exports = {
|
||||||
|
moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
|
||||||
|
transform: {
|
||||||
|
'^.+\\.vue$': 'vue-jest',
|
||||||
|
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
|
||||||
|
'jest-transform-stub',
|
||||||
|
'^.+\\.jsx?$': 'babel-jest'
|
||||||
|
},
|
||||||
|
moduleNameMapper: {
|
||||||
|
'^@/(.*)$': '<rootDir>/src/$1'
|
||||||
|
},
|
||||||
|
snapshotSerializers: ['jest-serializer-vue'],
|
||||||
|
testMatch: [
|
||||||
|
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
|
||||||
|
],
|
||||||
|
collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}'],
|
||||||
|
coverageDirectory: '<rootDir>/tests/unit/coverage',
|
||||||
|
// 'collectCoverage': true,
|
||||||
|
'coverageReporters': [
|
||||||
|
'lcov',
|
||||||
|
'text-summary'
|
||||||
|
],
|
||||||
|
testURL: 'http://localhost/'
|
||||||
|
}
|
||||||
@ -1,26 +1,66 @@
|
|||||||
import Mock from 'mockjs'
|
import Mock from 'mockjs'
|
||||||
import userAPI from './user'
|
import { param2Obj } from '../src/utils'
|
||||||
import tableAPI from './table'
|
|
||||||
|
import user from './user'
|
||||||
// Fix an issue with setting withCredentials = true, cross-domain request lost cookies
|
import table from './table'
|
||||||
// https://github.com/nuysoft/Mock/issues/300
|
|
||||||
Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
|
const mocks = [
|
||||||
Mock.XHR.prototype.send = function() {
|
...user,
|
||||||
if (this.custom.xhr) {
|
...table
|
||||||
this.custom.xhr.withCredentials = this.withCredentials || false
|
]
|
||||||
|
|
||||||
|
// for front mock
|
||||||
|
// please use it cautiously, it will redefine XMLHttpRequest,
|
||||||
|
// which will cause many of your third-party libraries to be invalidated(like progress event).
|
||||||
|
export function mockXHR() {
|
||||||
|
// mock patch
|
||||||
|
// https://github.com/nuysoft/Mock/issues/300
|
||||||
|
Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
|
||||||
|
Mock.XHR.prototype.send = function() {
|
||||||
|
if (this.custom.xhr) {
|
||||||
|
this.custom.xhr.withCredentials = this.withCredentials || false
|
||||||
|
|
||||||
|
if (this.responseType) {
|
||||||
|
this.custom.xhr.responseType = this.responseType
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.proxy_send(...arguments)
|
||||||
}
|
}
|
||||||
this.proxy_send(...arguments)
|
|
||||||
}
|
|
||||||
// Mock.setup({
|
|
||||||
// timeout: '350-600'
|
|
||||||
// })
|
|
||||||
|
|
||||||
// User
|
function XHR2ExpressReqWrap(respond) {
|
||||||
Mock.mock(/\/user\/login/, 'post', userAPI.login)
|
return function(options) {
|
||||||
Mock.mock(/\/user\/info/, 'get', userAPI.getInfo)
|
let result = null
|
||||||
Mock.mock(/\/user\/logout/, 'post', userAPI.logout)
|
if (respond instanceof Function) {
|
||||||
|
const { body, type, url } = options
|
||||||
|
// https://expressjs.com/en/4x/api.html#req
|
||||||
|
result = respond({
|
||||||
|
method: type,
|
||||||
|
body: JSON.parse(body),
|
||||||
|
query: param2Obj(url)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
result = respond
|
||||||
|
}
|
||||||
|
return Mock.mock(result)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Table
|
for (const i of mocks) {
|
||||||
Mock.mock(/\/table\/list/, 'get', tableAPI.list)
|
Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// for mock server
|
||||||
|
const responseFake = (url, type, respond) => {
|
||||||
|
return {
|
||||||
|
url: new RegExp(`/mock${url}`),
|
||||||
|
type: type || 'get',
|
||||||
|
response(req, res) {
|
||||||
|
res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default Mock
|
export default mocks.map(route => {
|
||||||
|
return responseFake(route.url, route.type, route.response)
|
||||||
|
})
|
||||||
|
|||||||
@ -0,0 +1,64 @@
|
|||||||
|
const chokidar = require('chokidar')
|
||||||
|
const bodyParser = require('body-parser')
|
||||||
|
const chalk = require('chalk')
|
||||||
|
const path = require('path')
|
||||||
|
|
||||||
|
const mockDir = path.join(process.cwd(), 'mock')
|
||||||
|
|
||||||
|
function registerRoutes(app) {
|
||||||
|
let mockLastIndex
|
||||||
|
const { default: mocks } = require('./index.js')
|
||||||
|
for (const mock of mocks) {
|
||||||
|
app[mock.type](mock.url, mock.response)
|
||||||
|
mockLastIndex = app._router.stack.length
|
||||||
|
}
|
||||||
|
const mockRoutesLength = Object.keys(mocks).length
|
||||||
|
return {
|
||||||
|
mockRoutesLength: mockRoutesLength,
|
||||||
|
mockStartIndex: mockLastIndex - mockRoutesLength
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function unregisterRoutes() {
|
||||||
|
Object.keys(require.cache).forEach(i => {
|
||||||
|
if (i.includes(mockDir)) {
|
||||||
|
delete require.cache[require.resolve(i)]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = app => {
|
||||||
|
// es6 polyfill
|
||||||
|
require('@babel/register')
|
||||||
|
|
||||||
|
// parse app.body
|
||||||
|
// https://expressjs.com/en/4x/api.html#req.body
|
||||||
|
app.use(bodyParser.json())
|
||||||
|
app.use(bodyParser.urlencoded({
|
||||||
|
extended: true
|
||||||
|
}))
|
||||||
|
|
||||||
|
const mockRoutes = registerRoutes(app)
|
||||||
|
var mockRoutesLength = mockRoutes.mockRoutesLength
|
||||||
|
var mockStartIndex = mockRoutes.mockStartIndex
|
||||||
|
|
||||||
|
// watch files, hot reload mock server
|
||||||
|
chokidar.watch(mockDir, {
|
||||||
|
ignored: /mock-server/,
|
||||||
|
ignoreInitial: true
|
||||||
|
}).on('all', (event, path) => {
|
||||||
|
if (event === 'change' || event === 'add') {
|
||||||
|
// remove mock routes stack
|
||||||
|
app._router.stack.splice(mockStartIndex, mockRoutesLength)
|
||||||
|
|
||||||
|
// clear routes cache
|
||||||
|
unregisterRoutes()
|
||||||
|
|
||||||
|
const mockRoutes = registerRoutes(app)
|
||||||
|
mockRoutesLength = mockRoutes.mockRoutesLength
|
||||||
|
mockStartIndex = mockRoutes.mockStartIndex
|
||||||
|
|
||||||
|
console.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed ${path}`))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
@ -1,20 +1,29 @@
|
|||||||
import Mock from 'mockjs'
|
import Mock from 'mockjs'
|
||||||
|
|
||||||
export default {
|
const data = Mock.mock({
|
||||||
list: () => {
|
'items|30': [{
|
||||||
const items = Mock.mock({
|
id: '@id',
|
||||||
'items|30': [{
|
title: '@sentence(10, 20)',
|
||||||
id: '@id',
|
'status|1': ['published', 'draft', 'deleted'],
|
||||||
title: '@sentence(10, 20)',
|
author: 'name',
|
||||||
'status|1': ['published', 'draft', 'deleted'],
|
display_time: '@datetime',
|
||||||
author: 'name',
|
pageviews: '@integer(300, 5000)'
|
||||||
display_time: '@datetime',
|
}]
|
||||||
pageviews: '@integer(300, 5000)'
|
})
|
||||||
}]
|
|
||||||
})
|
export default [
|
||||||
return {
|
{
|
||||||
code: 20000,
|
url: '/table/list',
|
||||||
data: items
|
type: 'get',
|
||||||
|
response: config => {
|
||||||
|
const items = data.items
|
||||||
|
return {
|
||||||
|
code: 20000,
|
||||||
|
data: {
|
||||||
|
total: items.length,
|
||||||
|
items: items
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
]
|
||||||
|
|||||||
@ -1,14 +0,0 @@
|
|||||||
export function param2Obj(url) {
|
|
||||||
const search = url.split('?')[1]
|
|
||||||
if (!search) {
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
return JSON.parse(
|
|
||||||
'{"' +
|
|
||||||
decodeURIComponent(search)
|
|
||||||
.replace(/"/g, '\\"')
|
|
||||||
.replace(/&/g, '","')
|
|
||||||
.replace(/=/g, '":"') +
|
|
||||||
'"}'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<title><%= webpackConfig.name %></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,13 +1,10 @@
|
|||||||
import request from '@/utils/request'
|
import request from '@/utils/request'
|
||||||
|
|
||||||
export function login(username, password) {
|
export function login(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/user/login',
|
url: '/user/login',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data: {
|
data
|
||||||
username,
|
|
||||||
password
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1,9 +1,9 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import SvgIcon from '@/components/SvgIcon' // svg组件
|
import SvgIcon from '@/components/SvgIcon'// svg component
|
||||||
|
|
||||||
// register globally
|
// register globally
|
||||||
Vue.component('svg-icon', SvgIcon)
|
Vue.component('svg-icon', SvgIcon)
|
||||||
|
|
||||||
const requireAll = requireContext => requireContext.keys().map(requireContext)
|
|
||||||
const req = require.context('./svg', false, /\.svg$/)
|
const req = require.context('./svg', false, /\.svg$/)
|
||||||
|
const requireAll = requireContext => requireContext.keys().map(requireContext)
|
||||||
requireAll(req)
|
requireAll(req)
|
||||||
|
|||||||
@ -0,0 +1 @@
|
|||||||
|
<svg width="128" height="100" xmlns="http://www.w3.org/2000/svg"><path d="M27.429 63.638c0-2.508-.893-4.65-2.679-6.424-1.786-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.465 2.662-1.785 1.774-2.678 3.916-2.678 6.424 0 2.508.893 4.65 2.678 6.424 1.786 1.775 3.94 2.662 6.465 2.662 2.524 0 4.678-.887 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm13.714-31.801c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM71.714 65.98l7.215-27.116c.285-1.23.107-2.378-.536-3.443-.643-1.064-1.56-1.762-2.75-2.094-1.19-.33-2.333-.177-3.429.462-1.095.639-1.81 1.573-2.143 2.804l-7.214 27.116c-2.857.237-5.405 1.266-7.643 3.088-2.238 1.822-3.738 4.152-4.5 6.992-.952 3.644-.476 7.098 1.429 10.364 1.905 3.265 4.69 5.37 8.357 6.317 3.667.947 7.143.474 10.429-1.42 3.285-1.892 5.404-4.66 6.357-8.305.762-2.84.619-5.607-.429-8.305-1.047-2.697-2.762-4.85-5.143-6.46zm47.143-2.342c0-2.508-.893-4.65-2.678-6.424-1.786-1.775-3.94-2.662-6.465-2.662-2.524 0-4.678.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.786 1.775 3.94 2.662 6.464 2.662 2.524 0 4.679-.887 6.465-2.662 1.785-1.775 2.678-3.916 2.678-6.424zm-45.714-45.43c0-2.509-.893-4.65-2.679-6.425C68.68 10.01 66.524 9.122 64 9.122c-2.524 0-4.679.887-6.464 2.661-1.786 1.775-2.679 3.916-2.679 6.425 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm32 13.629c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM128 63.638c0 12.351-3.357 23.78-10.071 34.286-.905 1.372-2.19 2.058-3.858 2.058H13.93c-1.667 0-2.953-.686-3.858-2.058C3.357 87.465 0 76.037 0 63.638c0-8.613 1.69-16.847 5.071-24.703C8.452 31.08 13 24.312 18.714 18.634c5.715-5.68 12.524-10.199 20.429-13.559C47.048 1.715 55.333.035 64 .035c8.667 0 16.952 1.68 24.857 5.04 7.905 3.36 14.714 7.88 20.429 13.559 5.714 5.678 10.262 12.446 13.643 20.301 3.38 7.856 5.071 16.09 5.071 24.703z"/></svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
@ -1 +1 @@
|
|||||||
<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><defs><style/></defs><path d="M512 128q69.675 0 135.51 21.163t115.498 54.997 93.483 74.837 73.685 82.006 51.67 74.837 32.17 54.827L1024 512q-2.347 4.992-6.315 13.483T998.87 560.17t-31.658 51.669-44.331 59.99-56.832 64.34-69.504 60.16-82.347 51.5-94.848 34.687T512 896q-69.675 0-135.51-21.163t-115.498-54.826-93.483-74.326-73.685-81.493-51.67-74.496-32.17-54.997L0 513.707q2.347-4.992 6.315-13.483t18.816-34.816 31.658-51.84 44.331-60.33 56.832-64.683 69.504-60.331 82.347-51.84 94.848-34.816T512 128.085zm0 85.333q-46.677 0-91.648 12.331t-81.152 31.83-70.656 47.146-59.648 54.485-48.853 57.686-37.675 52.821-26.325 43.99q12.33 21.674 26.325 43.52t37.675 52.351 48.853 57.003 59.648 53.845T339.2 767.02t81.152 31.488T512 810.667t91.648-12.331 81.152-31.659 70.656-46.848 59.648-54.186 48.853-57.344 37.675-52.651T927.957 512q-12.33-21.675-26.325-43.648t-37.675-52.65-48.853-57.345-59.648-54.186-70.656-46.848-81.152-31.659T512 213.334zm0 128q70.656 0 120.661 50.006T682.667 512 632.66 632.661 512 682.667 391.339 632.66 341.333 512t50.006-120.661T512 341.333zm0 85.334q-35.328 0-60.33 25.002T426.666 512t25.002 60.33T512 597.334t60.33-25.002T597.334 512t-25.002-60.33T512 426.666z"/></svg>
|
<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><defs><style/></defs><path d="M512 128q69.675 0 135.51 21.163t115.498 54.997 93.483 74.837 73.685 82.006 51.67 74.837 32.17 54.827L1024 512q-2.347 4.992-6.315 13.483T998.87 560.17t-31.658 51.669-44.331 59.99-56.832 64.34-69.504 60.16-82.347 51.5-94.848 34.687T512 896q-69.675 0-135.51-21.163t-115.498-54.826-93.483-74.326-73.685-81.493-51.67-74.496-32.17-54.997L0 513.707q2.347-4.992 6.315-13.483t18.816-34.816 31.658-51.84 44.331-60.33 56.832-64.683 69.504-60.331 82.347-51.84 94.848-34.816T512 128.085zm0 85.333q-46.677 0-91.648 12.331t-81.152 31.83-70.656 47.146-59.648 54.485-48.853 57.686-37.675 52.821-26.325 43.99q12.33 21.674 26.325 43.52t37.675 52.351 48.853 57.003 59.648 53.845T339.2 767.02t81.152 31.488T512 810.667t91.648-12.331 81.152-31.659 70.656-46.848 59.648-54.186 48.853-57.344 37.675-52.651T927.957 512q-12.33-21.675-26.325-43.648t-37.675-52.65-48.853-57.345-59.648-54.186-70.656-46.848-81.152-31.659T512 213.334zm0 128q70.656 0 120.661 50.006T682.667 512 632.66 632.661 512 682.667 391.339 632.66 341.333 512t50.006-120.661T512 341.333zm0 85.334q-35.328 0-60.33 25.002T426.666 512t25.002 60.33T512 597.334t60.33-25.002T597.334 512t-25.002-60.33T512 426.666z"/></svg>
|
||||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
@ -1 +1 @@
|
|||||||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><g><path d="M115.625 127.937H.063V12.375h57.781v12.374H12.438v90.813h90.813V70.156h12.374z"/><path d="M116.426 2.821l8.753 8.753-56.734 56.734-8.753-8.745z"/><path d="M127.893 37.982h-12.375V12.375H88.706V0h39.187z"/></g></svg>
|
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M115.625 127.937H.063V12.375h57.781v12.374H12.438v90.813h90.813V70.156h12.374z"/><path d="M116.426 2.821l8.753 8.753-56.734 56.734-8.753-8.745z"/><path d="M127.893 37.982h-12.375V12.375H88.706V0h39.187z"/></svg>
|
||||||
|
Before Width: | Height: | Size: 292 B After Width: | Height: | Size: 285 B |
@ -1 +1 @@
|
|||||||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><g><path d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"/><path d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"/></g></svg>
|
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"/><path d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"/></svg>
|
||||||
|
Before Width: | Height: | Size: 604 B After Width: | Height: | Size: 597 B |
@ -0,0 +1,139 @@
|
|||||||
|
<template>
|
||||||
|
<div class="navbar">
|
||||||
|
<hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
||||||
|
|
||||||
|
<breadcrumb class="breadcrumb-container" />
|
||||||
|
|
||||||
|
<div class="right-menu">
|
||||||
|
<el-dropdown class="avatar-container" trigger="click">
|
||||||
|
<div class="avatar-wrapper">
|
||||||
|
<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
|
||||||
|
<i class="el-icon-caret-bottom" />
|
||||||
|
</div>
|
||||||
|
<el-dropdown-menu slot="dropdown" class="user-dropdown">
|
||||||
|
<router-link to="/">
|
||||||
|
<el-dropdown-item>
|
||||||
|
Home
|
||||||
|
</el-dropdown-item>
|
||||||
|
</router-link>
|
||||||
|
<a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
|
||||||
|
<el-dropdown-item>Github</el-dropdown-item>
|
||||||
|
</a>
|
||||||
|
<a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
|
||||||
|
<el-dropdown-item>Docs</el-dropdown-item>
|
||||||
|
</a>
|
||||||
|
<el-dropdown-item divided>
|
||||||
|
<span style="display:block;" @click="logout">Log Out</span>
|
||||||
|
</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapGetters } from 'vuex'
|
||||||
|
import Breadcrumb from '@/components/Breadcrumb'
|
||||||
|
import Hamburger from '@/components/Hamburger'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Breadcrumb,
|
||||||
|
Hamburger
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters([
|
||||||
|
'sidebar',
|
||||||
|
'avatar'
|
||||||
|
])
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleSideBar() {
|
||||||
|
this.$store.dispatch('app/toggleSideBar')
|
||||||
|
},
|
||||||
|
async logout() {
|
||||||
|
await this.$store.dispatch('user/logout')
|
||||||
|
this.$router.push(`/login?redirect=${this.$route.fullPath}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.navbar {
|
||||||
|
height: 50px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 1px 4px rgba(0,21,41,.08);
|
||||||
|
|
||||||
|
.hamburger-container {
|
||||||
|
line-height: 46px;
|
||||||
|
height: 100%;
|
||||||
|
float: left;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background .3s;
|
||||||
|
-webkit-tap-highlight-color:transparent;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(0, 0, 0, .025)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-container {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-menu {
|
||||||
|
float: right;
|
||||||
|
height: 100%;
|
||||||
|
line-height: 50px;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-menu-item {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 8px;
|
||||||
|
height: 100%;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #5a5e66;
|
||||||
|
vertical-align: text-bottom;
|
||||||
|
|
||||||
|
&.hover-effect {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background .3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(0, 0, 0, .025)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-container {
|
||||||
|
margin-right: 30px;
|
||||||
|
|
||||||
|
.avatar-wrapper {
|
||||||
|
margin-top: 5px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.user-avatar {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-icon-caret-bottom {
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
right: -20px;
|
||||||
|
top: 25px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
export default {
|
||||||
|
computed: {
|
||||||
|
device() {
|
||||||
|
return this.$store.state.app.device
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// In order to fix the click on menu on the ios device will trigger the mouseleave bug
|
||||||
|
// https://github.com/PanJiaChen/vue-element-admin/issues/1135
|
||||||
|
this.fixBugIniOS()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
fixBugIniOS() {
|
||||||
|
const $subMenu = this.$refs.subMenu
|
||||||
|
if ($subMenu) {
|
||||||
|
const handleMouseleave = $subMenu.handleMouseleave
|
||||||
|
$subMenu.handleMouseleave = (e) => {
|
||||||
|
if (this.device === 'mobile') {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
handleMouseleave(e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,82 @@
|
|||||||
|
<template>
|
||||||
|
<div class="sidebar-logo-container" :class="{'collapse':collapse}">
|
||||||
|
<transition name="sidebarLogoFade">
|
||||||
|
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
|
||||||
|
<img v-if="logo" :src="logo" class="sidebar-logo">
|
||||||
|
<h1 v-else class="sidebar-title">{{ title }} </h1>
|
||||||
|
</router-link>
|
||||||
|
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
||||||
|
<img v-if="logo" :src="logo" class="sidebar-logo">
|
||||||
|
<h1 class="sidebar-title">{{ title }} </h1>
|
||||||
|
</router-link>
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'SidebarLogo',
|
||||||
|
props: {
|
||||||
|
collapse: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
title: 'Vue Admin Template',
|
||||||
|
logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.sidebarLogoFade-enter-active {
|
||||||
|
transition: opacity 1.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebarLogoFade-enter,
|
||||||
|
.sidebarLogoFade-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-logo-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
background: #2b2f3a;
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
& .sidebar-logo-link {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
& .sidebar-logo {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .sidebar-title {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 50px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.collapse {
|
||||||
|
.sidebar-logo {
|
||||||
|
margin-right: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="{'has-logo':showLogo}">
|
||||||
|
<logo v-if="showLogo" :collapse="isCollapse" />
|
||||||
|
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||||
|
<el-menu
|
||||||
|
:default-active="activeMenu"
|
||||||
|
:collapse="isCollapse"
|
||||||
|
:background-color="variables.menuBg"
|
||||||
|
:text-color="variables.menuText"
|
||||||
|
:unique-opened="false"
|
||||||
|
:active-text-color="variables.menuActiveText"
|
||||||
|
:collapse-transition="false"
|
||||||
|
mode="vertical"
|
||||||
|
>
|
||||||
|
<sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
|
||||||
|
</el-menu>
|
||||||
|
</el-scrollbar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapGetters } from 'vuex'
|
||||||
|
import Logo from './Logo'
|
||||||
|
import SidebarItem from './SidebarItem'
|
||||||
|
import variables from '@/styles/variables.scss'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { SidebarItem, Logo },
|
||||||
|
computed: {
|
||||||
|
...mapGetters([
|
||||||
|
'permission_routes',
|
||||||
|
'sidebar'
|
||||||
|
]),
|
||||||
|
activeMenu() {
|
||||||
|
const route = this.$route
|
||||||
|
const { meta, path } = route
|
||||||
|
// if set path, the sidebar will highlight the path you set
|
||||||
|
if (meta.activeMenu) {
|
||||||
|
return meta.activeMenu
|
||||||
|
}
|
||||||
|
return path
|
||||||
|
},
|
||||||
|
showLogo() {
|
||||||
|
return this.$store.state.settings.sidebarLogo
|
||||||
|
},
|
||||||
|
variables() {
|
||||||
|
return variables
|
||||||
|
},
|
||||||
|
isCollapse() {
|
||||||
|
return !this.sidebar.opened
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
import store from '@/store'
|
||||||
|
|
||||||
|
const { body } = document
|
||||||
|
const WIDTH = 992 // refer to Bootstrap's responsive design
|
||||||
|
|
||||||
|
export default {
|
||||||
|
watch: {
|
||||||
|
$route(route) {
|
||||||
|
if (this.device === 'mobile' && this.sidebar.opened) {
|
||||||
|
store.dispatch('app/closeSideBar', { withoutAnimation: false })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeMount() {
|
||||||
|
window.addEventListener('resize', this.$_resizeHandler)
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
window.removeEventListener('resize', this.$_resizeHandler)
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const isMobile = this.$_isMobile()
|
||||||
|
if (isMobile) {
|
||||||
|
store.dispatch('app/toggleDevice', 'mobile')
|
||||||
|
store.dispatch('app/closeSideBar', { withoutAnimation: true })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// use $_ for mixins properties
|
||||||
|
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||||
|
$_isMobile() {
|
||||||
|
const rect = body.getBoundingClientRect()
|
||||||
|
return rect.width - 1 < WIDTH
|
||||||
|
},
|
||||||
|
$_resizeHandler() {
|
||||||
|
if (!document.hidden) {
|
||||||
|
const isMobile = this.$_isMobile()
|
||||||
|
store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
|
||||||
|
|
||||||
|
if (isMobile) {
|
||||||
|
store.dispatch('app/closeSideBar', { withoutAnimation: true })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,43 +1,74 @@
|
|||||||
import router from './router'
|
import router from './router'
|
||||||
import store from './store'
|
import store from './store'
|
||||||
|
import { Message } from 'element-ui'
|
||||||
import NProgress from 'nprogress' // progress bar
|
import NProgress from 'nprogress' // progress bar
|
||||||
import 'nprogress/nprogress.css' // progress bar style
|
import 'nprogress/nprogress.css' // progress bar style
|
||||||
import { Message } from 'element-ui'
|
import { getToken } from '@/utils/auth' // get token from cookie
|
||||||
import { getToken } from '@/utils/auth' // getToken from cookie
|
import getPageTitle from '@/utils/get-page-title'
|
||||||
|
|
||||||
NProgress.configure({ showSpinner: false })// NProgress configuration
|
NProgress.configure({ showSpinner: false }) // NProgress Configuration
|
||||||
|
|
||||||
const whiteList = ['/login'] // 不重定向白名单
|
const whiteList = ['/login'] // no redirect whitelist
|
||||||
router.beforeEach((to, from, next) => {
|
|
||||||
|
router.beforeEach(async(to, from, next) => {
|
||||||
|
// start progress bar
|
||||||
NProgress.start()
|
NProgress.start()
|
||||||
if (getToken()) {
|
|
||||||
|
// set page title
|
||||||
|
document.title = getPageTitle(to.meta.title)
|
||||||
|
|
||||||
|
// determine whether the user has logged in
|
||||||
|
const hasToken = getToken()
|
||||||
|
|
||||||
|
if (hasToken) {
|
||||||
if (to.path === '/login') {
|
if (to.path === '/login') {
|
||||||
|
// if is logged in, redirect to the home page
|
||||||
next({ path: '/' })
|
next({ path: '/' })
|
||||||
NProgress.done() // if current page is dashboard will not trigger afterEach hook, so manually handle it
|
NProgress.done()
|
||||||
} else {
|
} else {
|
||||||
if (store.getters.roles.length === 0) {
|
// determine whether the user has obtained his permission roles through getInfo
|
||||||
store.dispatch('GetInfo').then(res => { // 拉取用户信息
|
const hasRoles = store.getters.roles && store.getters.roles.length > 0
|
||||||
next()
|
if (hasRoles) {
|
||||||
}).catch((err) => {
|
|
||||||
store.dispatch('FedLogOut').then(() => {
|
|
||||||
Message.error(err || 'Verification failed, please login again')
|
|
||||||
next({ path: '/' })
|
|
||||||
})
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
next()
|
next()
|
||||||
|
} else {
|
||||||
|
try {
|
||||||
|
// get user info
|
||||||
|
// note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
|
||||||
|
const { roles } = await store.dispatch('user/getInfo')
|
||||||
|
|
||||||
|
// generate accessible routes map based on roles
|
||||||
|
const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
|
||||||
|
|
||||||
|
// dynamically add accessible routes
|
||||||
|
router.addRoutes(accessRoutes)
|
||||||
|
|
||||||
|
// hack method to ensure that addRoutes is complete
|
||||||
|
// set the replace: true, so the navigation will not leave a history record
|
||||||
|
next({ ...to, replace: true })
|
||||||
|
} catch (error) {
|
||||||
|
// remove token and go to login page to re-login
|
||||||
|
await store.dispatch('user/resetToken')
|
||||||
|
Message.error(error || 'Has Error')
|
||||||
|
next(`/login?redirect=${to.path}`)
|
||||||
|
NProgress.done()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
/* has no token*/
|
||||||
|
|
||||||
if (whiteList.indexOf(to.path) !== -1) {
|
if (whiteList.indexOf(to.path) !== -1) {
|
||||||
|
// in the free login whitelist, go directly
|
||||||
next()
|
next()
|
||||||
} else {
|
} else {
|
||||||
next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
|
// other pages that do not have permission to access are redirected to the login page.
|
||||||
|
next(`/login?redirect=${to.path}`)
|
||||||
NProgress.done()
|
NProgress.done()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
router.afterEach(() => {
|
router.afterEach(() => {
|
||||||
NProgress.done() // 结束Progress
|
// finish progress bar
|
||||||
|
NProgress.done()
|
||||||
})
|
})
|
||||||
|
|||||||
@ -0,0 +1,16 @@
|
|||||||
|
module.exports = {
|
||||||
|
|
||||||
|
title: 'Vue Admin Template',
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @type {boolean} true | false
|
||||||
|
* @description Whether fix the header
|
||||||
|
*/
|
||||||
|
fixedHeader: false,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @type {boolean} true | false
|
||||||
|
* @description Whether show the logo in sidebar
|
||||||
|
*/
|
||||||
|
sidebarLogo: false
|
||||||
|
}
|
||||||
@ -1,43 +1,48 @@
|
|||||||
import Cookies from 'js-cookie'
|
import Cookies from 'js-cookie'
|
||||||
|
|
||||||
const app = {
|
const state = {
|
||||||
state: {
|
sidebar: {
|
||||||
sidebar: {
|
opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
|
||||||
opened: !+Cookies.get('sidebarStatus'),
|
withoutAnimation: false
|
||||||
withoutAnimation: false
|
|
||||||
},
|
|
||||||
device: 'desktop'
|
|
||||||
},
|
},
|
||||||
mutations: {
|
device: 'desktop'
|
||||||
TOGGLE_SIDEBAR: state => {
|
}
|
||||||
if (state.sidebar.opened) {
|
|
||||||
Cookies.set('sidebarStatus', 1)
|
const mutations = {
|
||||||
} else {
|
TOGGLE_SIDEBAR: state => {
|
||||||
Cookies.set('sidebarStatus', 0)
|
state.sidebar.opened = !state.sidebar.opened
|
||||||
}
|
state.sidebar.withoutAnimation = false
|
||||||
state.sidebar.opened = !state.sidebar.opened
|
if (state.sidebar.opened) {
|
||||||
state.sidebar.withoutAnimation = false
|
|
||||||
},
|
|
||||||
CLOSE_SIDEBAR: (state, withoutAnimation) => {
|
|
||||||
Cookies.set('sidebarStatus', 1)
|
Cookies.set('sidebarStatus', 1)
|
||||||
state.sidebar.opened = false
|
} else {
|
||||||
state.sidebar.withoutAnimation = withoutAnimation
|
Cookies.set('sidebarStatus', 0)
|
||||||
},
|
|
||||||
TOGGLE_DEVICE: (state, device) => {
|
|
||||||
state.device = device
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
actions: {
|
CLOSE_SIDEBAR: (state, withoutAnimation) => {
|
||||||
ToggleSideBar: ({ commit }) => {
|
Cookies.set('sidebarStatus', 0)
|
||||||
commit('TOGGLE_SIDEBAR')
|
state.sidebar.opened = false
|
||||||
},
|
state.sidebar.withoutAnimation = withoutAnimation
|
||||||
CloseSideBar({ commit }, { withoutAnimation }) {
|
},
|
||||||
commit('CLOSE_SIDEBAR', withoutAnimation)
|
TOGGLE_DEVICE: (state, device) => {
|
||||||
},
|
state.device = device
|
||||||
ToggleDevice({ commit }, device) {
|
}
|
||||||
commit('TOGGLE_DEVICE', device)
|
}
|
||||||
}
|
|
||||||
|
const actions = {
|
||||||
|
toggleSideBar({ commit }) {
|
||||||
|
commit('TOGGLE_SIDEBAR')
|
||||||
|
},
|
||||||
|
closeSideBar({ commit }, { withoutAnimation }) {
|
||||||
|
commit('CLOSE_SIDEBAR', withoutAnimation)
|
||||||
|
},
|
||||||
|
toggleDevice({ commit }, device) {
|
||||||
|
commit('TOGGLE_DEVICE', device)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default app
|
export default {
|
||||||
|
namespaced: true,
|
||||||
|
state,
|
||||||
|
mutations,
|
||||||
|
actions
|
||||||
|
}
|
||||||
|
|||||||
@ -0,0 +1,69 @@
|
|||||||
|
import { asyncRoutes, constantRoutes } from '@/router'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Use meta.role to determine if the current user has permission
|
||||||
|
* @param roles
|
||||||
|
* @param route
|
||||||
|
*/
|
||||||
|
function hasPermission(roles, route) {
|
||||||
|
if (route.meta && route.meta.roles) {
|
||||||
|
return roles.some(role => route.meta.roles.includes(role))
|
||||||
|
} else {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Filter asynchronous routing tables by recursion
|
||||||
|
* @param routes asyncRoutes
|
||||||
|
* @param roles
|
||||||
|
*/
|
||||||
|
export function filterAsyncRoutes(routes, roles) {
|
||||||
|
const res = []
|
||||||
|
|
||||||
|
routes.forEach(route => {
|
||||||
|
const tmp = { ...route }
|
||||||
|
if (hasPermission(roles, tmp)) {
|
||||||
|
if (tmp.children) {
|
||||||
|
tmp.children = filterAsyncRoutes(tmp.children, roles)
|
||||||
|
}
|
||||||
|
res.push(tmp)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return res
|
||||||
|
}
|
||||||
|
|
||||||
|
const state = {
|
||||||
|
routes: [],
|
||||||
|
addRoutes: []
|
||||||
|
}
|
||||||
|
|
||||||
|
const mutations = {
|
||||||
|
SET_ROUTES: (state, routes) => {
|
||||||
|
state.addRoutes = routes
|
||||||
|
state.routes = constantRoutes.concat(routes)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const actions = {
|
||||||
|
generateRoutes({ commit }, roles) {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
let accessedRoutes
|
||||||
|
if (roles.includes('admin')) {
|
||||||
|
accessedRoutes = asyncRoutes || []
|
||||||
|
} else {
|
||||||
|
accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
|
||||||
|
}
|
||||||
|
commit('SET_ROUTES', accessedRoutes)
|
||||||
|
resolve(accessedRoutes)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
namespaced: true,
|
||||||
|
state,
|
||||||
|
mutations,
|
||||||
|
actions
|
||||||
|
}
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
import defaultSettings from '@/settings'
|
||||||
|
|
||||||
|
const { showSettings, fixedHeader, sidebarLogo } = defaultSettings
|
||||||
|
|
||||||
|
const state = {
|
||||||
|
showSettings: showSettings,
|
||||||
|
fixedHeader: fixedHeader,
|
||||||
|
sidebarLogo: sidebarLogo
|
||||||
|
}
|
||||||
|
|
||||||
|
const mutations = {
|
||||||
|
CHANGE_SETTING: (state, { key, value }) => {
|
||||||
|
if (state.hasOwnProperty(key)) {
|
||||||
|
state[key] = value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const actions = {
|
||||||
|
changeSetting({ commit }, data) {
|
||||||
|
commit('CHANGE_SETTING', data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
namespaced: true,
|
||||||
|
state,
|
||||||
|
mutations,
|
||||||
|
actions
|
||||||
|
}
|
||||||
|
|
||||||
@ -1,87 +1,102 @@
|
|||||||
import { login, logout, getInfo } from '@/api/login'
|
import { login, logout, getInfo } from '@/api/user'
|
||||||
import { getToken, setToken, removeToken } from '@/utils/auth'
|
import { getToken, setToken, removeToken } from '@/utils/auth'
|
||||||
|
import { resetRouter } from '@/router'
|
||||||
|
|
||||||
const user = {
|
const state = {
|
||||||
state: {
|
token: getToken(),
|
||||||
token: getToken(),
|
name: '',
|
||||||
name: '',
|
avatar: '',
|
||||||
avatar: '',
|
roles: []
|
||||||
roles: []
|
}
|
||||||
},
|
|
||||||
|
|
||||||
mutations: {
|
const mutations = {
|
||||||
SET_TOKEN: (state, token) => {
|
SET_TOKEN: (state, token) => {
|
||||||
state.token = token
|
state.token = token
|
||||||
},
|
},
|
||||||
SET_NAME: (state, name) => {
|
SET_NAME: (state, name) => {
|
||||||
state.name = name
|
state.name = name
|
||||||
},
|
|
||||||
SET_AVATAR: (state, avatar) => {
|
|
||||||
state.avatar = avatar
|
|
||||||
},
|
|
||||||
SET_ROLES: (state, roles) => {
|
|
||||||
state.roles = roles
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
SET_AVATAR: (state, avatar) => {
|
||||||
|
state.avatar = avatar
|
||||||
|
},
|
||||||
|
SET_ROLES: (state, roles) => {
|
||||||
|
state.roles = roles
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
actions: {
|
const actions = {
|
||||||
// 登录
|
// user login
|
||||||
Login({ commit }, userInfo) {
|
login({ commit }, userInfo) {
|
||||||
const username = userInfo.username.trim()
|
const { username, password } = userInfo
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
login(username, userInfo.password).then(response => {
|
login({ username: username.trim(), password: password }).then(response => {
|
||||||
const data = response.data
|
const { data } = response
|
||||||
setToken(data.token)
|
commit('SET_TOKEN', data.token)
|
||||||
commit('SET_TOKEN', data.token)
|
setToken(data.token)
|
||||||
resolve()
|
resolve()
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
reject(error)
|
reject(error)
|
||||||
})
|
|
||||||
})
|
})
|
||||||
},
|
})
|
||||||
|
},
|
||||||
|
|
||||||
// 获取用户信息
|
// get user info
|
||||||
GetInfo({ commit, state }) {
|
getInfo({ commit, state }) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
getInfo(state.token).then(response => {
|
getInfo(state.token).then(response => {
|
||||||
const data = response.data
|
const { data } = response
|
||||||
if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
|
|
||||||
commit('SET_ROLES', data.roles)
|
|
||||||
} else {
|
|
||||||
reject('getInfo: roles must be a non-null array !')
|
|
||||||
}
|
|
||||||
commit('SET_NAME', data.name)
|
|
||||||
commit('SET_AVATAR', data.avatar)
|
|
||||||
resolve(response)
|
|
||||||
}).catch(error => {
|
|
||||||
reject(error)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
// 登出
|
if (!data) {
|
||||||
LogOut({ commit, state }) {
|
reject('Verification failed, please Login again.')
|
||||||
return new Promise((resolve, reject) => {
|
}
|
||||||
logout(state.token).then(() => {
|
|
||||||
commit('SET_TOKEN', '')
|
const { roles, name, avatar } = data
|
||||||
commit('SET_ROLES', [])
|
|
||||||
removeToken()
|
// roles must be a non-empty array
|
||||||
resolve()
|
if (!roles || roles.length <= 0) {
|
||||||
}).catch(error => {
|
reject('getInfo: roles must be a non-null array!')
|
||||||
reject(error)
|
}
|
||||||
})
|
|
||||||
|
commit('SET_ROLES', roles)
|
||||||
|
commit('SET_NAME', name)
|
||||||
|
commit('SET_AVATAR', avatar)
|
||||||
|
resolve(data)
|
||||||
|
}).catch(error => {
|
||||||
|
reject(error)
|
||||||
})
|
})
|
||||||
},
|
})
|
||||||
|
},
|
||||||
|
|
||||||
// 前端 登出
|
// user logout
|
||||||
FedLogOut({ commit }) {
|
logout({ commit, state }) {
|
||||||
return new Promise(resolve => {
|
return new Promise((resolve, reject) => {
|
||||||
|
logout(state.token).then(() => {
|
||||||
commit('SET_TOKEN', '')
|
commit('SET_TOKEN', '')
|
||||||
|
commit('SET_ROLES', [])
|
||||||
removeToken()
|
removeToken()
|
||||||
|
resetRouter()
|
||||||
resolve()
|
resolve()
|
||||||
|
}).catch(error => {
|
||||||
|
reject(error)
|
||||||
})
|
})
|
||||||
}
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// remove token
|
||||||
|
resetToken({ commit }) {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
commit('SET_TOKEN', '')
|
||||||
|
commit('SET_ROLES', [])
|
||||||
|
removeToken()
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default user
|
export default {
|
||||||
|
namespaced: true,
|
||||||
|
state,
|
||||||
|
mutations,
|
||||||
|
actions
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@ -0,0 +1,10 @@
|
|||||||
|
import defaultSettings from '@/settings'
|
||||||
|
|
||||||
|
const title = defaultSettings.title || 'Vue Admin Template'
|
||||||
|
|
||||||
|
export default function getPageTitle(pageTitle) {
|
||||||
|
if (pageTitle) {
|
||||||
|
return `${pageTitle} - ${title}`
|
||||||
|
}
|
||||||
|
return `${title}`
|
||||||
|
}
|
||||||
@ -0,0 +1,90 @@
|
|||||||
|
/**
|
||||||
|
* Created by PanJiaChen on 16/11/18.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Parse the time to string
|
||||||
|
* @param {(Object|string|number)} time
|
||||||
|
* @param {string} cFormat
|
||||||
|
* @returns {string}
|
||||||
|
*/
|
||||||
|
export function parseTime(time, cFormat) {
|
||||||
|
if (arguments.length === 0) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
|
||||||
|
let date
|
||||||
|
if (typeof time === 'object') {
|
||||||
|
date = time
|
||||||
|
} else {
|
||||||
|
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
|
||||||
|
time = parseInt(time)
|
||||||
|
}
|
||||||
|
if ((typeof time === 'number') && (time.toString().length === 10)) {
|
||||||
|
time = time * 1000
|
||||||
|
}
|
||||||
|
date = new Date(time)
|
||||||
|
}
|
||||||
|
const formatObj = {
|
||||||
|
y: date.getFullYear(),
|
||||||
|
m: date.getMonth() + 1,
|
||||||
|
d: date.getDate(),
|
||||||
|
h: date.getHours(),
|
||||||
|
i: date.getMinutes(),
|
||||||
|
s: date.getSeconds(),
|
||||||
|
a: date.getDay()
|
||||||
|
}
|
||||||
|
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
|
||||||
|
let value = formatObj[key]
|
||||||
|
// Note: getDay() returns 0 on Sunday
|
||||||
|
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
|
||||||
|
if (result.length > 0 && value < 10) {
|
||||||
|
value = '0' + value
|
||||||
|
}
|
||||||
|
return value || 0
|
||||||
|
})
|
||||||
|
return time_str
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {number} time
|
||||||
|
* @param {string} option
|
||||||
|
* @returns {string}
|
||||||
|
*/
|
||||||
|
export function formatTime(time, option) {
|
||||||
|
if (('' + time).length === 10) {
|
||||||
|
time = parseInt(time) * 1000
|
||||||
|
} else {
|
||||||
|
time = +time
|
||||||
|
}
|
||||||
|
const d = new Date(time)
|
||||||
|
const now = Date.now()
|
||||||
|
|
||||||
|
const diff = (now - d) / 1000
|
||||||
|
|
||||||
|
if (diff < 30) {
|
||||||
|
return '刚刚'
|
||||||
|
} else if (diff < 3600) {
|
||||||
|
// less 1 hour
|
||||||
|
return Math.ceil(diff / 60) + '分钟前'
|
||||||
|
} else if (diff < 3600 * 24) {
|
||||||
|
return Math.ceil(diff / 3600) + '小时前'
|
||||||
|
} else if (diff < 3600 * 24 * 2) {
|
||||||
|
return '1天前'
|
||||||
|
}
|
||||||
|
if (option) {
|
||||||
|
return parseTime(time, option)
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
d.getMonth() +
|
||||||
|
1 +
|
||||||
|
'月' +
|
||||||
|
d.getDate() +
|
||||||
|
'日' +
|
||||||
|
d.getHours() +
|
||||||
|
'时' +
|
||||||
|
d.getMinutes() +
|
||||||
|
'分'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,12 +1,20 @@
|
|||||||
/**
|
/**
|
||||||
* Created by jiachenpan on 16/11/18.
|
* Created by PanJiaChen on 16/11/18.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export function isvalidUsername(str) {
|
/**
|
||||||
const valid_map = ['admin', 'editor']
|
* @param {string} path
|
||||||
return valid_map.indexOf(str.trim()) >= 0
|
* @returns {Boolean}
|
||||||
}
|
*/
|
||||||
|
|
||||||
export function isExternal(path) {
|
export function isExternal(path) {
|
||||||
return /^(https?:|mailto:|tel:)/.test(path)
|
return /^(https?:|mailto:|tel:)/.test(path)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string} str
|
||||||
|
* @returns {Boolean}
|
||||||
|
*/
|
||||||
|
export function validUsername(str) {
|
||||||
|
const valid_map = ['admin', 'editor']
|
||||||
|
return valid_map.indexOf(str.trim()) >= 0
|
||||||
|
}
|
||||||
|
|||||||
@ -1,95 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="navbar">
|
|
||||||
<hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
|
|
||||||
<breadcrumb />
|
|
||||||
<el-dropdown class="avatar-container" trigger="click">
|
|
||||||
<div class="avatar-wrapper">
|
|
||||||
<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
|
|
||||||
<i class="el-icon-caret-bottom"/>
|
|
||||||
</div>
|
|
||||||
<el-dropdown-menu slot="dropdown" class="user-dropdown">
|
|
||||||
<router-link class="inlineBlock" to="/">
|
|
||||||
<el-dropdown-item>
|
|
||||||
Home
|
|
||||||
</el-dropdown-item>
|
|
||||||
</router-link>
|
|
||||||
<el-dropdown-item divided>
|
|
||||||
<span style="display:block;" @click="logout">LogOut</span>
|
|
||||||
</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</el-dropdown>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapGetters } from 'vuex'
|
|
||||||
import Breadcrumb from '@/components/Breadcrumb'
|
|
||||||
import Hamburger from '@/components/Hamburger'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
Breadcrumb,
|
|
||||||
Hamburger
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters([
|
|
||||||
'sidebar',
|
|
||||||
'avatar'
|
|
||||||
])
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
toggleSideBar() {
|
|
||||||
this.$store.dispatch('ToggleSideBar')
|
|
||||||
},
|
|
||||||
logout() {
|
|
||||||
this.$store.dispatch('LogOut').then(() => {
|
|
||||||
location.reload() // 为了重新实例化vue-router对象 避免bug
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
||||||
.navbar {
|
|
||||||
height: 50px;
|
|
||||||
line-height: 50px;
|
|
||||||
box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
|
|
||||||
.hamburger-container {
|
|
||||||
line-height: 58px;
|
|
||||||
height: 50px;
|
|
||||||
float: left;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
.screenfull {
|
|
||||||
position: absolute;
|
|
||||||
right: 90px;
|
|
||||||
top: 16px;
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
.avatar-container {
|
|
||||||
height: 50px;
|
|
||||||
display: inline-block;
|
|
||||||
position: absolute;
|
|
||||||
right: 35px;
|
|
||||||
.avatar-wrapper {
|
|
||||||
cursor: pointer;
|
|
||||||
margin-top: 5px;
|
|
||||||
position: relative;
|
|
||||||
line-height: initial;
|
|
||||||
.user-avatar {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
.el-icon-caret-bottom {
|
|
||||||
position: absolute;
|
|
||||||
right: -20px;
|
|
||||||
top: 25px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
|
||||||
<el-menu
|
|
||||||
:default-active="$route.path"
|
|
||||||
:collapse="isCollapse"
|
|
||||||
:background-color="variables.menuBg"
|
|
||||||
:text-color="variables.menuText"
|
|
||||||
:active-text-color="variables.menuActiveText"
|
|
||||||
:collapse-transition="false"
|
|
||||||
mode="vertical"
|
|
||||||
>
|
|
||||||
<sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path"/>
|
|
||||||
</el-menu>
|
|
||||||
</el-scrollbar>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapGetters } from 'vuex'
|
|
||||||
import variables from '@/styles/variables.scss'
|
|
||||||
import SidebarItem from './SidebarItem'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: { SidebarItem },
|
|
||||||
computed: {
|
|
||||||
...mapGetters([
|
|
||||||
'sidebar'
|
|
||||||
]),
|
|
||||||
routes() {
|
|
||||||
return this.$router.options.routes
|
|
||||||
},
|
|
||||||
variables() {
|
|
||||||
return variables
|
|
||||||
},
|
|
||||||
isCollapse() {
|
|
||||||
return !this.sidebar.opened
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
import store from '@/store'
|
|
||||||
|
|
||||||
const { body } = document
|
|
||||||
const WIDTH = 992 // refer to Bootstrap's responsive design
|
|
||||||
|
|
||||||
export default {
|
|
||||||
watch: {
|
|
||||||
$route(route) {
|
|
||||||
if (this.device === 'mobile' && this.sidebar.opened) {
|
|
||||||
store.dispatch('CloseSideBar', { withoutAnimation: false })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
beforeMount() {
|
|
||||||
window.addEventListener('resize', this.resizeHandler)
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
const isMobile = this.isMobile()
|
|
||||||
if (isMobile) {
|
|
||||||
store.dispatch('ToggleDevice', 'mobile')
|
|
||||||
store.dispatch('CloseSideBar', { withoutAnimation: true })
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
isMobile() {
|
|
||||||
const rect = body.getBoundingClientRect()
|
|
||||||
return rect.width - 1 < WIDTH
|
|
||||||
},
|
|
||||||
resizeHandler() {
|
|
||||||
if (!document.hidden) {
|
|
||||||
const isMobile = this.isMobile()
|
|
||||||
store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
|
|
||||||
|
|
||||||
if (isMobile) {
|
|
||||||
store.dispatch('CloseSideBar', { withoutAnimation: true })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
env: {
|
||||||
|
jest: true
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,98 @@
|
|||||||
|
import { mount, createLocalVue } from '@vue/test-utils'
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
import ElementUI from 'element-ui'
|
||||||
|
import Breadcrumb from '@/components/Breadcrumb/index.vue'
|
||||||
|
|
||||||
|
const localVue = createLocalVue()
|
||||||
|
localVue.use(VueRouter)
|
||||||
|
localVue.use(ElementUI)
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'home',
|
||||||
|
children: [{
|
||||||
|
path: 'dashboard',
|
||||||
|
name: 'dashboard'
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/menu',
|
||||||
|
name: 'menu',
|
||||||
|
children: [{
|
||||||
|
path: 'menu1',
|
||||||
|
name: 'menu1',
|
||||||
|
meta: { title: 'menu1' },
|
||||||
|
children: [{
|
||||||
|
path: 'menu1-1',
|
||||||
|
name: 'menu1-1',
|
||||||
|
meta: { title: 'menu1-1' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'menu1-2',
|
||||||
|
name: 'menu1-2',
|
||||||
|
redirect: 'noredirect',
|
||||||
|
meta: { title: 'menu1-2' },
|
||||||
|
children: [{
|
||||||
|
path: 'menu1-2-1',
|
||||||
|
name: 'menu1-2-1',
|
||||||
|
meta: { title: 'menu1-2-1' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'menu1-2-2',
|
||||||
|
name: 'menu1-2-2'
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('Breadcrumb.vue', () => {
|
||||||
|
const wrapper = mount(Breadcrumb, {
|
||||||
|
localVue,
|
||||||
|
router
|
||||||
|
})
|
||||||
|
it('dashboard', () => {
|
||||||
|
router.push('/dashboard')
|
||||||
|
const len = wrapper.findAll('.el-breadcrumb__inner').length
|
||||||
|
expect(len).toBe(1)
|
||||||
|
})
|
||||||
|
it('normal route', () => {
|
||||||
|
router.push('/menu/menu1')
|
||||||
|
const len = wrapper.findAll('.el-breadcrumb__inner').length
|
||||||
|
expect(len).toBe(2)
|
||||||
|
})
|
||||||
|
it('nested route', () => {
|
||||||
|
router.push('/menu/menu1/menu1-2/menu1-2-1')
|
||||||
|
const len = wrapper.findAll('.el-breadcrumb__inner').length
|
||||||
|
expect(len).toBe(4)
|
||||||
|
})
|
||||||
|
it('no meta.title', () => {
|
||||||
|
router.push('/menu/menu1/menu1-2/menu1-2-2')
|
||||||
|
const len = wrapper.findAll('.el-breadcrumb__inner').length
|
||||||
|
expect(len).toBe(3)
|
||||||
|
})
|
||||||
|
// it('click link', () => {
|
||||||
|
// router.push('/menu/menu1/menu1-2/menu1-2-2')
|
||||||
|
// const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')
|
||||||
|
// const second = breadcrumbArray.at(1)
|
||||||
|
// console.log(breadcrumbArray)
|
||||||
|
// const href = second.find('a').attributes().href
|
||||||
|
// expect(href).toBe('#/menu/menu1')
|
||||||
|
// })
|
||||||
|
// it('noRedirect', () => {
|
||||||
|
// router.push('/menu/menu1/menu1-2/menu1-2-1')
|
||||||
|
// const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')
|
||||||
|
// const redirectBreadcrumb = breadcrumbArray.at(2)
|
||||||
|
// expect(redirectBreadcrumb.contains('a')).toBe(false)
|
||||||
|
// })
|
||||||
|
it('last breadcrumb', () => {
|
||||||
|
router.push('/menu/menu1/menu1-2/menu1-2-1')
|
||||||
|
const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')
|
||||||
|
const redirectBreadcrumb = breadcrumbArray.at(3)
|
||||||
|
expect(redirectBreadcrumb.contains('a')).toBe(false)
|
||||||
|
})
|
||||||
|
})
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
import { shallowMount } from '@vue/test-utils'
|
||||||
|
import Hamburger from '@/components/Hamburger/index.vue'
|
||||||
|
describe('Hamburger.vue', () => {
|
||||||
|
it('toggle click', () => {
|
||||||
|
const wrapper = shallowMount(Hamburger)
|
||||||
|
const mockFn = jest.fn()
|
||||||
|
wrapper.vm.$on('toggleClick', mockFn)
|
||||||
|
wrapper.find('.hamburger').trigger('click')
|
||||||
|
expect(mockFn).toBeCalled()
|
||||||
|
})
|
||||||
|
it('prop isActive', () => {
|
||||||
|
const wrapper = shallowMount(Hamburger)
|
||||||
|
wrapper.setProps({ isActive: true })
|
||||||
|
expect(wrapper.contains('.is-active')).toBe(true)
|
||||||
|
wrapper.setProps({ isActive: false })
|
||||||
|
expect(wrapper.contains('.is-active')).toBe(false)
|
||||||
|
})
|
||||||
|
})
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
import { shallowMount } from '@vue/test-utils'
|
||||||
|
import SvgIcon from '@/components/SvgIcon/index.vue'
|
||||||
|
describe('SvgIcon.vue', () => {
|
||||||
|
it('iconClass', () => {
|
||||||
|
const wrapper = shallowMount(SvgIcon, {
|
||||||
|
propsData: {
|
||||||
|
iconClass: 'test'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
expect(wrapper.find('use').attributes().href).toBe('#icon-test')
|
||||||
|
})
|
||||||
|
it('className', () => {
|
||||||
|
const wrapper = shallowMount(SvgIcon, {
|
||||||
|
propsData: {
|
||||||
|
iconClass: 'test'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
expect(wrapper.classes().length).toBe(1)
|
||||||
|
wrapper.setProps({ className: 'test' })
|
||||||
|
expect(wrapper.classes().includes('test')).toBe(true)
|
||||||
|
})
|
||||||
|
})
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
import { formatTime } from '@/utils/index.js'
|
||||||
|
|
||||||
|
describe('Utils:formatTime', () => {
|
||||||
|
const d = new Date('2018-07-13 17:54:01') // "2018-07-13 17:54:01"
|
||||||
|
const retrofit = 5 * 1000
|
||||||
|
|
||||||
|
it('ten digits timestamp', () => {
|
||||||
|
expect(formatTime((d / 1000).toFixed(0))).toBe('7月13日17时54分')
|
||||||
|
})
|
||||||
|
it('test now', () => {
|
||||||
|
expect(formatTime(+new Date() - 1)).toBe('刚刚')
|
||||||
|
})
|
||||||
|
it('less two minute', () => {
|
||||||
|
expect(formatTime(+new Date() - 60 * 2 * 1000 + retrofit)).toBe('2分钟前')
|
||||||
|
})
|
||||||
|
it('less two hour', () => {
|
||||||
|
expect(formatTime(+new Date() - 60 * 60 * 2 * 1000 + retrofit)).toBe('2小时前')
|
||||||
|
})
|
||||||
|
it('less one day', () => {
|
||||||
|
expect(formatTime(+new Date() - 60 * 60 * 24 * 1 * 1000)).toBe('1天前')
|
||||||
|
})
|
||||||
|
it('more than one day', () => {
|
||||||
|
expect(formatTime(d)).toBe('7月13日17时54分')
|
||||||
|
})
|
||||||
|
it('format', () => {
|
||||||
|
expect(formatTime(d, '{y}-{m}-{d} {h}:{i}')).toBe('2018-07-13 17:54')
|
||||||
|
expect(formatTime(d, '{y}-{m}-{d}')).toBe('2018-07-13')
|
||||||
|
expect(formatTime(d, '{y}/{m}/{d} {h}-{i}')).toBe('2018/07/13 17-54')
|
||||||
|
})
|
||||||
|
})
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
import { parseTime } from '@/utils/index.js'
|
||||||
|
|
||||||
|
describe('Utils:parseTime', () => {
|
||||||
|
const d = new Date('2018-07-13 17:54:01') // "2018-07-13 17:54:01"
|
||||||
|
it('timestamp', () => {
|
||||||
|
expect(parseTime(d)).toBe('2018-07-13 17:54:01')
|
||||||
|
})
|
||||||
|
it('ten digits timestamp', () => {
|
||||||
|
expect(parseTime((d / 1000).toFixed(0))).toBe('2018-07-13 17:54:01')
|
||||||
|
})
|
||||||
|
it('new Date', () => {
|
||||||
|
expect(parseTime(new Date(d))).toBe('2018-07-13 17:54:01')
|
||||||
|
})
|
||||||
|
it('format', () => {
|
||||||
|
expect(parseTime(d, '{y}-{m}-{d} {h}:{i}')).toBe('2018-07-13 17:54')
|
||||||
|
expect(parseTime(d, '{y}-{m}-{d}')).toBe('2018-07-13')
|
||||||
|
expect(parseTime(d, '{y}/{m}/{d} {h}-{i}')).toBe('2018/07/13 17-54')
|
||||||
|
})
|
||||||
|
it('get the day of the week', () => {
|
||||||
|
expect(parseTime(d, '{a}')).toBe('五') // 星期五
|
||||||
|
})
|
||||||
|
it('get the day of the week', () => {
|
||||||
|
expect(parseTime(+d + 1000 * 60 * 60 * 24 * 2, '{a}')).toBe('日') // 星期日
|
||||||
|
})
|
||||||
|
it('empty argument', () => {
|
||||||
|
expect(parseTime()).toBeNull()
|
||||||
|
})
|
||||||
|
})
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
import { validUsername, isExternal } from '@/utils/validate.js'
|
||||||
|
|
||||||
|
describe('Utils:validate', () => {
|
||||||
|
it('validUsername', () => {
|
||||||
|
expect(validUsername('admin')).toBe(true)
|
||||||
|
expect(validUsername('editor')).toBe(true)
|
||||||
|
expect(validUsername('xxxx')).toBe(false)
|
||||||
|
})
|
||||||
|
it('isExternal', () => {
|
||||||
|
expect(isExternal('https://github.com/PanJiaChen/vue-element-admin')).toBe(true)
|
||||||
|
expect(isExternal('http://github.com/PanJiaChen/vue-element-admin')).toBe(true)
|
||||||
|
expect(isExternal('github.com/PanJiaChen/vue-element-admin')).toBe(false)
|
||||||
|
expect(isExternal('/dashboard')).toBe(false)
|
||||||
|
expect(isExternal('./dashboard')).toBe(false)
|
||||||
|
expect(isExternal('dashboard')).toBe(false)
|
||||||
|
})
|
||||||
|
})
|
||||||
@ -0,0 +1,133 @@
|
|||||||
|
'use strict'
|
||||||
|
const path = require('path')
|
||||||
|
const defaultSettings = require('./src/settings.js')
|
||||||
|
|
||||||
|
function resolve(dir) {
|
||||||
|
return path.join(__dirname, dir)
|
||||||
|
}
|
||||||
|
|
||||||
|
const name = defaultSettings.title || 'vue Admin Template' // page title
|
||||||
|
const port = 9528 // dev port
|
||||||
|
|
||||||
|
// All configuration item explanations can be find in https://cli.vuejs.org/config/
|
||||||
|
module.exports = {
|
||||||
|
/**
|
||||||
|
* 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
|
||||||
|
},
|
||||||
|
proxy: {
|
||||||
|
// change xxx-api/login => mock/login
|
||||||
|
// detail: https://cli.vuejs.org/config/#devserver-proxy
|
||||||
|
[process.env.VUE_APP_BASE_API]: {
|
||||||
|
target: `http://localhost:${port}/mock`,
|
||||||
|
changeOrigin: true,
|
||||||
|
pathRewrite: {
|
||||||
|
['^' + process.env.VUE_APP_BASE_API]: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
after: 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')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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