diff --git a/.eslintrc.js b/.eslintrc.js index 00d60805..6f55c5a1 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,7 +1,7 @@ module.exports = { root: true, - parser: 'babel-eslint', parserOptions: { + parser: 'babel-eslint', sourceType: 'module' }, env: { @@ -9,22 +9,19 @@ module.exports = { node: true, es6: true, }, - extends: 'eslint:recommended', - // required to lint *.vue files - plugins: [ - 'html' - ], - // check if imports actually resolve - 'settings': { - 'import/resolver': { - 'webpack': { - 'config': 'build/webpack.base.conf.js' - } - } - }, + extends: ['plugin:vue/recommended', 'eslint:recommended'], + // add your custom rules here //it is base on https://github.com/vuejs/eslint-config-vue - 'rules': { + rules: { + "vue/max-attributes-per-line": [2, { + "singleline": 10, + "multiline": { + "max": 1, + "allowFirstLine": false + } + }], + "vue/name-property-casing": ["error", "PascalCase"], 'accessor-pairs': 2, 'arrow-spacing': [2, { 'before': true, @@ -196,4 +193,3 @@ module.exports = { 'array-bracket-spacing': [2, 'never'] } } - diff --git a/README.md b/README.md index 7624c398..27234ec7 100644 --- a/README.md +++ b/README.md @@ -4,10 +4,10 @@

- vue + vue - element-ui + element-ui Build Status @@ -38,25 +38,32 @@ It is a magical vue admin based on the newest development stack of vue, built-in - [Donate](https://panjiachen.github.io/vue-element-admin-site/donate/) +- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 国内用户可访问该地址在线预览 + **This project is positioned as a background integration solution and is not suitable for secondary development as a basic template.** - - Base template recommends using: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)   - - Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) +- Base template recommends using: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template) +- Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) + +**This project does not support low version browsers (e.g. IE). Please add polyfill yourself if you need them.** + +**Note: This project uses element-ui@2.3.0+ version, so the minimum compatible vue@2.5.0+** + +**Start using `webpack4` from `v3.8.0`. If you still want to continue using `webpack3`, please use this branch [webpack3](https://github.com/PanJiaChen/vue-element-admin/tree/webpack3)** ## Preparation You need to install [node](http://nodejs.org/) and [git](https://git-scm.com/) locally. The project is based on [ES2015+](http://es6.ruanyifeng.com/), [vue](https://cn.vuejs.org/index.html), [vuex](https://vuex.vuejs.org/zh-cn/), [vue-router](https://router.vuejs.org/zh-cn/), [axios](https://github.com/axios/axios) and [element-ui](https://github.com/ElemeFE/element), all request data is simulated using [Mock.js](https://github.com/nuysoft/Mock). - Understanding and learning this knowledge in advance will greatly help the use of this project. +Understanding and learning this knowledge in advance will greatly help the use of this project. - **This project does not support low version browsers (e.g. IE). Please add polyfill yourself if you need them.** - - **Note: This project uses element-ui@2.3.0+ version, so the minimum compatible vue@2.5.0+** +---

## Features + ``` - Login / Logout @@ -136,6 +143,7 @@ npm run dev This will automatically open http://localhost:9527. ## Build + ```bash # build for test environment npm run build:sit @@ -145,10 +153,14 @@ npm run build:prod ``` ## Advanced + ```bash # --report to build with bundle size analytics npm run build:prod --report +# --generate a bundle size analytics. default: bundle-report.html +npm run build:prod --generate_report + # --preview to start a server in local to preview npm run build:prod --preview @@ -162,12 +174,15 @@ npm run lint -- --fix Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) for more information ## Changelog + Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases). ## Online Demo + [Preview](http://panjiachen.github.io/vue-element-admin) ## Donate + If you find this project useful, you can buy author a glass of juice :tropical_drink: ![donate](https://wpimg.wallstcn.com/bd273f0d-83a0-4ef2-92e1-9ac8ed3746b9.png) diff --git a/README.zh-CN.md b/README.zh-CN.md index 11360760..4d136c84 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -24,50 +24,58 @@ ## 简介 -[vue-element-admin](http://panjiachen.github.io/vue-element-admin) 是一个后台集成解决方案，它基于 [vue](https://github.com/vuejs/vue) 和 [element](https://github.com/ElemeFE/element)。它使用了最新的前端技术栈，内置了i18国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。 +[vue-element-admin](http://panjiachen.github.io/vue-element-admin) 是一个后台集成解决方案，它基于 [vue](https://github.com/vuejs/vue) 和 [element](https://github.com/ElemeFE/element)。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。 - [在线访问](http://panjiachen.github.io/vue-element-admin) - [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/) -- [Gitter讨论组](https://gitter.im/vue-element-admin/discuss) +- [Gitter 讨论组](https://gitter.im/vue-element-admin/discuss) - [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki) - [Donate](https://panjiachen.github.io/vue-element-admin-site/zh/donate/) +- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 国内用户可访问该地址在线预览 + +- [国内访问文档](https://panjiachen.gitee.io/vue-element-admin-site/zh/) 方便没翻墙的用户查看文档 + **本项目的定位是后台集成方案，不适合当基础模板来开发。** - - 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)   - - 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) + +- 模板建议使用: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template) +- 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) + +群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西，或者加入[qq 群](https://github.com/PanJiaChen/vue-element-admin/issues/602) + +**注意：该项目使用 element-ui@2.3.0+ 版本，所以最低兼容 vue@2.5.0+** + +**从`v3.8.0`开始使用`webpack4`。所以若还想使用`webpack3`开发，请使用该分支[webpack3](https://github.com/PanJiaChen/vue-element-admin/tree/webpack3)** + +**该项目不支持低版本浏览器(如 ie)，有需求请自行添加 polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)** ## 前序准备 你需要在本地安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。本项目技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 、[axios](https://github.com/axios/axios) 和 [element-ui](https://github.com/ElemeFE/element)，所有的请求数据都使用[Mock.js](https://github.com/nuysoft/Mock)模拟，提前了解和学习这些知识会对使用本项目有很大的帮助。 同时配套一个系列的教程文章，如何从零构建后一个完整的后台项目，建议大家先看完这些文章再来实践本项目 - - [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2) - - [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac) - - [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35) - - [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56) - - [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836) - - [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09) +- [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2) +- [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac) +- [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35) +- [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56) +- [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836) +- [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09) +- [手摸手，带你用合理的姿势使用 webpack4（上）](https://juejin.im/post/5b56909a518825195f499806) +- [手摸手，带你用合理的姿势使用 webpack4（下）](https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc) - 或者加入该群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西 - - **如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 和 pr** - - **本项目并不是一个脚手架，更倾向于是一个集成解决方案** - - **注意：该项目使用 element-ui@2.3.0+ 版本，所以最低兼容 vue@2.5.0+** - - **该项目不支持低版本浏览器(如ie)，有需求请自行添加polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)** +**如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 和 pr**

## 功能 + ``` - 登录 / 注销 @@ -132,22 +140,25 @@ ``` ## 开发 + ```bash # 克隆项目 git clone https://github.com/PanJiaChen/vue-element-admin.git # 安装依赖 npm install -    + # 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org # 启动服务 npm run dev ``` + 浏览器访问 http://localhost:9527 ## 发布 + ```bash # 构建测试环境 npm run build:sit @@ -157,9 +168,13 @@ npm run build:prod ``` ## 其它 + ```bash # --report to build with bundle size analytics -npm run build:prod --report +npm run build:prod + +# --generate a bundle size analytics. default: bundle-report.html +npm run build:prod --generate_report # --preview to start a server in local to preview npm run build:prod --preview @@ -174,12 +189,15 @@ npm run lint -- --fix 更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/) ## Changelog + Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases). ## Online Demo + [在线 Demo](http://panjiachen.github.io/vue-element-admin) ## Donate + 如果你觉得这个项目帮助到了你，你可以帮作者买一杯果汁表示鼓励 :tropical_drink: ![donate](https://panjiachen.github.io/donate/donation.png) diff --git a/build/build.js b/build/build.js index fe24ac8f..34c71a55 100644 --- a/build/build.js +++ b/build/build.js @@ -8,10 +8,12 @@ const chalk = require('chalk') const webpack = require('webpack') const config = require('../config') const webpackConfig = require('./webpack.prod.conf') -var connect = require('connect'); +var connect = require('connect') var serveStatic = require('serve-static') -const spinner = ora('building for ' + process.env.env_config + ' environment...') +const spinner = ora( + 'building for ' + process.env.env_config + ' environment...' +) spinner.start() rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { @@ -19,13 +21,15 @@ rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), 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') + 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')) @@ -33,24 +37,31 @@ rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { } 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' - )) + 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" + ) + ) if (process.env.npm_config_preview) { const port = 9526 - const host = "http://localhost:" + port + const host = 'http://localhost:' + port const basePath = config.build.assetsPublicPath const app = connect() - app.use(basePath, serveStatic('./dist', { - 'index': ['index.html', '/'] - })) + app.use( + basePath, + serveStatic('./dist', { + index: ['index.html', '/'] + }) + ) - app.listen(port, function () { - console.log(chalk.green(`> Listening at http://localhost:${port}${basePath}`)) - }); + app.listen(port, function() { + console.log( + chalk.green(`> Listening at http://localhost:${port}${basePath}`) + ) + }) } }) }) diff --git a/build/check-versions.js b/build/check-versions.js index 3ef972a0..c5c29e90 100644 --- a/build/check-versions.js +++ b/build/check-versions.js @@ -4,8 +4,11 @@ const semver = require('semver') const packageConfig = require('../package.json') const shell = require('shelljs') -function exec (cmd) { - return require('child_process').execSync(cmd).toString().trim() +function exec(cmd) { + return require('child_process') + .execSync(cmd) + .toString() + .trim() } const versionRequirements = [ @@ -24,23 +27,30 @@ if (shell.which('npm')) { }) } -module.exports = function () { +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) + 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( + chalk.yellow( + 'To use this template, you must update following to modules:' + ) + ) console.log() for (let i = 0; i < warnings.length; i++) { diff --git a/build/utils.js b/build/utils.js index e534fb0f..c96d0936 100644 --- a/build/utils.js +++ b/build/utils.js @@ -1,18 +1,19 @@ 'use strict' const path = require('path') const config = require('../config') -const ExtractTextPlugin = require('extract-text-webpack-plugin') +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 +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) { +exports.cssLoaders = function(options) { options = options || {} const cssLoader = { @@ -30,8 +31,22 @@ exports.cssLoaders = function (options) { } // generate loader string to be used with extract text plugin - function generateLoaders (loader, loaderOptions) { - const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] + 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({ @@ -42,24 +57,16 @@ exports.cssLoaders = function (options) { }) } - // Extract CSS when that option is specified - // (which is the case during production build) - if (options.extract) { - return ExtractTextPlugin.extract({ - use: loaders, - fallback: 'vue-style-loader' - }) - } else { - return ['vue-style-loader'].concat(loaders) - } + 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 }), + sass: generateLoaders('sass', { + indentedSyntax: true + }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') @@ -67,7 +74,7 @@ exports.cssLoaders = function (options) { } // Generate loaders for standalone style files (outside of .vue) -exports.styleLoaders = function (options) { +exports.styleLoaders = function(options) { const output = [] const loaders = exports.cssLoaders(options) diff --git a/build/vue-loader.conf.js b/build/vue-loader.conf.js index 33ed58bc..5496c931 100644 --- a/build/vue-loader.conf.js +++ b/build/vue-loader.conf.js @@ -1,22 +1,5 @@ 'use strict' -const utils = require('./utils') -const config = require('../config') -const isProduction = process.env.NODE_ENV === 'production' -const sourceMapEnabled = isProduction - ? config.build.productionSourceMap - : config.dev.cssSourceMap module.exports = { - loaders: utils.cssLoaders({ - sourceMap: sourceMapEnabled, - extract: isProduction - }), - cssSourceMap: sourceMapEnabled, - cacheBusting: config.dev.cacheBusting, - transformToRequire: { - video: ['src', 'poster'], - source: 'src', - img: 'src', - image: 'xlink:href' - } + //You can set the vue-loader configuration by yourself. } diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js index 9936a877..3b946b4b 100644 --- a/build/webpack.base.conf.js +++ b/build/webpack.base.conf.js @@ -2,9 +2,10 @@ 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) { +function resolve(dir) { return path.join(__dirname, '..', dir) } @@ -27,14 +28,15 @@ module.exports = { output: { path: config.build.assetsRoot, filename: '[name].js', - publicPath: process.env.NODE_ENV === 'production' - ? config.build.assetsPublicPath - : config.dev.assetsPublicPath + publicPath: + process.env.NODE_ENV === 'production' + ? config.build.assetsPublicPath + : config.dev.assetsPublicPath }, resolve: { extensions: ['.js', '.vue', '.json'], alias: { - '@': resolve('src'), + '@': resolve('src') } }, module: { @@ -48,7 +50,11 @@ module.exports = { { test: /\.js$/, loader: 'babel-loader?cacheDirectory', - include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] + include: [ + resolve('src'), + resolve('test'), + resolve('node_modules/webpack-dev-server/client') + ] }, { test: /\.svg$/, @@ -85,6 +91,7 @@ module.exports = { } ] }, + plugins: [new VueLoaderPlugin()], node: { // prevent webpack from injecting useless setImmediate polyfill because Vue // source contains it (although only uses it if it's native). diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js index 43901e5b..5eba7eb3 100644 --- a/build/webpack.dev.conf.js +++ b/build/webpack.dev.conf.js @@ -9,7 +9,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin') const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') const portfinder = require('portfinder') -function resolve (dir) { +function resolve(dir) { return path.join(__dirname, '..', dir) } @@ -17,8 +17,12 @@ 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 }) + rules: utils.styleLoaders({ + sourceMap: config.dev.cssSourceMap, + usePostCSS: true + }) }, // cheap-module-eval-source-map is faster for development devtool: config.dev.devtool, @@ -39,7 +43,7 @@ const devWebpackConfig = merge(baseWebpackConfig, { proxy: config.dev.proxyTable, quiet: true, // necessary for FriendlyErrorsPlugin watchOptions: { - poll: config.dev.poll, + poll: config.dev.poll } }, plugins: [ @@ -47,8 +51,6 @@ const devWebpackConfig = merge(baseWebpackConfig, { 'process.env': require('../config/dev.env') }), new webpack.HotModuleReplacementPlugin(), - new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. - new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html', @@ -57,7 +59,7 @@ const devWebpackConfig = merge(baseWebpackConfig, { favicon: resolve('favicon.ico'), title: 'vue-element-admin', path: config.dev.assetsPublicPath + config.dev.assetsSubDirectory - }), + }) ] }) @@ -73,14 +75,20 @@ module.exports = new Promise((resolve, reject) => { 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 - })) + 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) } diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js index 7f710543..6220cc6b 100644 --- a/build/webpack.prod.conf.js +++ b/build/webpack.prod.conf.js @@ -7,17 +7,23 @@ const merge = require('webpack-merge') const baseWebpackConfig = require('./webpack.base.conf') const CopyWebpackPlugin = require('copy-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') -const ExtractTextPlugin = require('extract-text-webpack-plugin') -const OptimizeCSSPlugin = require('optimize-css-assets-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) { +function resolve(dir) { return path.join(__dirname, '..', dir) } -const env = require('../config/'+process.env.env_config+'.env') +const env = require('../config/' + process.env.env_config + '.env') + +// For NamedChunksPlugin +const seen = new Set() +const nameLength = 4 const webpackConfig = merge(baseWebpackConfig, { + mode: 'production', module: { rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, @@ -28,37 +34,18 @@ const webpackConfig = merge(baseWebpackConfig, { devtool: config.build.productionSourceMap ? config.build.devtool : false, output: { path: config.build.assetsRoot, - filename: utils.assetsPath('js/[name].[chunkhash].js'), - chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') + 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 }), - new UglifyJsPlugin({ - uglifyOptions: { - compress: { - warnings: false - } - }, - sourceMap: config.build.productionSourceMap, - parallel: true - }), // extract css into its own file - new ExtractTextPlugin({ - filename: utils.assetsPath('css/[name].[contenthash].css'), - // Setting the following option to `false` will not extract CSS from codesplit chunks. - // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. - // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110 - allChunks: false, - }), - // Compress extracted CSS. We are using this plugin so that possible - // duplicated CSS from different components can be deduped. - new OptimizeCSSPlugin({ - cssProcessorOptions: config.build.productionSourceMap - ? { safe: true, map: { inline: false } } - : { safe: true } + 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 @@ -76,68 +63,34 @@ const webpackConfig = merge(baseWebpackConfig, { removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference - }, - // necessary to consistently work with multiple chunks via CommonsChunkPlugin - chunksSortMode: 'dependency' + } + // 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(), - // enable scope hoisting - new webpack.optimize.ModuleConcatenationPlugin(), - // split vendor js into its own file - new webpack.optimize.CommonsChunkPlugin({ - name: 'vendor', - minChunks (module) { - // any required modules inside node_modules are extracted to vendor - return ( - module.resource && - /\.js$/.test(module.resource) && - module.resource.indexOf( - path.join(__dirname, '../node_modules') - ) === 0 - ) - } - }), - // extract webpack runtime and module manifest to its own file in order to - // prevent vendor hash from being updated whenever app bundle is updated - new webpack.optimize.CommonsChunkPlugin({ - name: 'manifest', - minChunks: Infinity - }), - // This instance extracts shared chunks from code splitted chunks and bundles them - // in a separate chunk, similar to the vendor chunk - // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk - new webpack.optimize.CommonsChunkPlugin({ - name: 'app', - async: 'vendor-async', - children: true, - minChunks: 3 - }), - // split echarts into its own file - new webpack.optimize.CommonsChunkPlugin({ - async: 'echarts', - minChunks(module) { - var context = module.context; - return context && (context.indexOf('echarts') >= 0 || context.indexOf('zrender') >= 0); - } - }), - // split xlsx into its own file - new webpack.optimize.CommonsChunkPlugin({ - async: 'xlsx', - minChunks(module) { - var context = module.context; - return context && (context.indexOf('xlsx') >= 0); - } - }), - // split codemirror into its own file - new webpack.optimize.CommonsChunkPlugin({ - async: 'codemirror', - minChunks(module) { - var context = module.context; - return context && (context.indexOf('codemirror') >= 0); - } - }), - // copy custom static assets new CopyWebpackPlugin([ { @@ -146,7 +99,48 @@ const webpackConfig = merge(baseWebpackConfig, { 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[\\/]/ + }, + commons: { + name: 'chunk-comomns', + test: resolve('src/components'), // 可自定义拓展你的规则 + minChunks: 3, // 最小公用次数 + priority: 5, + reuseExistingChunk: true + } + } + }, + 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) { @@ -157,9 +151,7 @@ if (config.build.productionGzip) { asset: '[path].gz[query]', algorithm: 'gzip', test: new RegExp( - '\\.(' + - config.build.productionGzipExtensions.join('|') + - ')$' + '\\.(' + config.build.productionGzipExtensions.join('|') + ')$' ), threshold: 10240, minRatio: 0.8 @@ -167,9 +159,28 @@ if (config.build.productionGzip) { ) } -if (config.build.bundleAnalyzerReport) { - const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin - webpackConfig.plugins.push(new BundleAnalyzerPlugin()) +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 diff --git a/config/index.js b/config/index.js index 92c4a172..599e4a63 100644 --- a/config/index.js +++ b/config/index.js @@ -6,7 +6,6 @@ const path = require('path') module.exports = { dev: { - // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', @@ -36,19 +35,14 @@ module.exports = { */ // https://webpack.js.org/configuration/devtool/#development - devtool: '#cheap-source-map', - - // If you have problems debugging vue-files in devtools, - // set this to false - it *may* help - // https://vue-loader.vuejs.org/en/options.html#cachebusting - cacheBusting: true, + 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, + cssSourceMap: false }, build: { @@ -66,14 +60,14 @@ module.exports = { * then assetsPublicPath should be set to "/bar/". * In most cases please use '/' !!! */ - assetsPublicPath: '/vue-element-admin/', // If you are deployed on the root path, please use '/' + assetsPublicPath: '/', /** * Source Maps */ productionSourceMap: false, // https://webpack.js.org/configuration/devtool/#production - devtool: '#source-map', + devtool: 'source-map', // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. @@ -84,8 +78,11 @@ module.exports = { // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: - // `npm run build --report` + // `npm run build:prod --report` // Set to `true` or `false` to always turn it on or off - bundleAnalyzerReport: process.env.npm_config_report + bundleAnalyzerReport: process.env.npm_config_report || false, + + // `npm run build:prod --generate_report` + generateAnalyzerReport: process.env.npm_config_generate_report || false } } diff --git a/package.json b/package.json index 803a6fb5..48dfa91f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-element-admin", - "version": "3.7.2", + "version": "3.8.1", "description": "A magical vue admin. Typical templates for enterprise applications. Newest development stack of vue. Lots of awesome features", "author": "Pan ", "license": "MIT", @@ -33,15 +33,15 @@ "url": "https://github.com/PanJiaChen/vue-element-admin/issues" }, "dependencies": { - "axios": "0.17.1", + "axios": "0.18.0", "clipboard": "1.7.1", - "codemirror": "5.32.0", + "codemirror": "5.39.2", "connect": "3.6.6", "driver.js": "0.5.2", "dropzone": "5.2.0", - "echarts": "3.8.5", - "element-ui": "2.3.2", - "file-saver": "1.3.3", + "echarts": "4.1.0", + "element-ui": "2.4.6", + "file-saver": "1.3.8", "font-awesome": "4.7.0", "js-cookie": "2.2.0", "jsonlint": "1.6.3", @@ -50,14 +50,13 @@ "normalize.css": "7.0.0", "nprogress": "0.2.0", "screenfull": "3.3.2", - "serve-static": "1.13.2", - "showdown": "1.8.5", + "showdown": "1.8.6", "simplemde": "1.11.2", "sortablejs": "1.7.0", - "vue": "2.5.10", + "vue": "2.5.17", "vue-count-to": "1.0.13", "vue-i18n": "7.3.2", - "vue-multiselect": "2.0.8", + "vue-multiselect": "2.1.0", "vue-router": "3.0.1", "vue-splitpane": "1.0.2", "vuedraggable": "^2.16.0", @@ -65,57 +64,61 @@ "xlsx": "^0.11.16" }, "devDependencies": { - "autoprefixer": "7.2.3", - "babel-core": "6.26.0", - "babel-eslint": "8.0.3", + "autoprefixer": "8.5.0", + "babel-core": "6.26.3", + "babel-eslint": "8.2.6", "babel-helper-vue-jsx-merge-props": "2.0.3", - "babel-loader": "7.1.2", - "babel-plugin-dynamic-import-node": "^1.2.0", + "babel-loader": "7.1.5", + "babel-plugin-dynamic-import-node": "2.0.0", "babel-plugin-syntax-jsx": "6.18.0", "babel-plugin-transform-runtime": "6.23.0", - "babel-plugin-transform-vue-jsx": "3.5.0", - "babel-preset-env": "1.6.1", + "babel-plugin-transform-vue-jsx": "3.7.0", + "babel-preset-env": "1.7.0", "babel-preset-stage-2": "6.24.1", - "chalk": "2.3.0", - "copy-webpack-plugin": "4.3.0", - "cross-env": "5.1.1", - "css-loader": "0.28.7", - "eslint": "4.13.1", - "eslint-friendly-formatter": "3.0.0", - "eslint-loader": "1.9.0", - "eslint-plugin-html": "4.0.1", - "extract-text-webpack-plugin": "3.0.2", - "file-loader": "1.1.5", - "friendly-errors-webpack-plugin": "1.6.1", - "html-webpack-plugin": "2.30.1", + "chalk": "2.4.1", + "copy-webpack-plugin": "4.5.2", + "cross-env": "5.2.0", + "css-loader": "1.0.0", + "eslint": "4.19.1", + "eslint-friendly-formatter": "4.0.1", + "eslint-loader": "2.0.0", + "eslint-plugin-vue": "4.7.1", + "file-loader": "1.1.11", + "friendly-errors-webpack-plugin": "1.7.0", + "hash-sum": "1.0.2", + "html-webpack-plugin": "^4.0.0-alpha", "husky": "0.14.3", - "lint-staged": "7.2.0", - "node-notifier": "5.1.2", + "lint-staged": "7.2.2", + "mini-css-extract-plugin": "0.4.1", + "node-notifier": "5.2.1", "node-sass": "^4.7.2", - "optimize-css-assets-webpack-plugin": "3.2.0", - "ora": "1.3.0", + "optimize-css-assets-webpack-plugin": "5.0.0", + "ora": "3.0.0", "portfinder": "1.0.13", - "postcss-import": "11.0.0", - "postcss-loader": "2.0.9", - "postcss-url": "7.3.0", + "postcss-import": "11.1.0", + "postcss-loader": "2.1.6", + "postcss-url": "7.3.2", "rimraf": "2.6.2", - "sass-loader": "6.0.6", + "sass-loader": "7.0.3", + "script-ext-html-webpack-plugin": "2.0.1", "script-loader": "0.7.2", - "semver": "5.4.1", - "shelljs": "0.7.8", - "svg-sprite-loader": "3.5.2", - "uglifyjs-webpack-plugin": "1.1.3", - "url-loader": "0.6.2", - "vue-loader": "13.7.2", - "vue-style-loader": "3.0.3", - "vue-template-compiler": "2.5.10", - "webpack": "3.10.0", - "webpack-bundle-analyzer": "2.9.1", - "webpack-dev-server": "2.9.7", - "webpack-merge": "4.1.1" + "semver": "5.5.0", + "serve-static": "1.13.2", + "shelljs": "0.8.2", + "svg-sprite-loader": "3.8.0", + "uglifyjs-webpack-plugin": "1.2.7", + "url-loader": "1.0.1", + "vue-loader": "15.3.0", + "vue-style-loader": "4.1.2", + "vue-template-compiler": "2.5.17", + "webpack": "4.16.5", + "webpack-bundle-analyzer": "2.13.1", + "webpack-cli": "3.1.0", + "webpack-dev-server": "3.1.5", + "webpack-merge": "4.1.4" }, "engines": { - "node": ">= 4.0.0", + "node": ">= 6.0.0", "npm": ">= 3.0.0" }, "browserslist": [ diff --git a/src/App.vue b/src/App.vue index 690cfc98..ab408f3e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,11 +1,11 @@ diff --git a/src/components/BackToTop/index.vue b/src/components/BackToTop/index.vue index de953821..2d4b0193 100644 --- a/src/components/BackToTop/index.vue +++ b/src/components/BackToTop/index.vue @@ -1,10 +1,10 @@ @@ -20,7 +27,7 @@ import ImageCropper from '@/components/ImageCropper' import PanThumb from '@/components/PanThumb' export default { - name: 'avatarUpload-demo', + name: 'AvatarUploadDemo', components: { ImageCropper, PanThumb }, data() { return { diff --git a/src/views/components-demo/backToTop.vue b/src/views/components-demo/backToTop.vue index 6abb652a..83a5529b 100644 --- a/src/views/components-demo/backToTop.vue +++ b/src/views/components-demo/backToTop.vue @@ -1,7 +1,7 @@ @@ -125,7 +125,7 @@ import BackToTop from '@/components/BackToTop' export default { - name: 'backToTop-demo', + name: 'BackToTopDemo', components: { BackToTop }, data() { return { diff --git a/src/views/components-demo/countTo.vue b/src/views/components-demo/countTo.vue index b30204d9..7044a5d2 100644 --- a/src/views/components-demo/countTo.vue +++ b/src/views/components-demo/countTo.vue @@ -3,37 +3,46 @@

countTo-component

- +
开始
暂停/恢复
-
+
- <count-to :start-val='{{_startVal}}' :end-val='{{_endVal}}' :duration='{{_duration}}' - :decimals='{{_decimals}}' :separator='{{_separator}}' :prefix='{{_prefix}}' :suffix='{{_suffix}}' - :autoplay=false> + <count-to :start-val='{{ _startVal }}' :end-val='{{ _endVal }}' :duration='{{ _duration }}' + :decimals='{{ _decimals }}' :separator='{{ _separator }}' :prefix='{{ _prefix }}' :suffix='{{ _suffix }}' + :autoplay=false> @@ -41,7 +50,7 @@ import countTo from 'vue-count-to' export default { - name: 'countTo-demo', + name: 'CountToDemo', components: { countTo }, data() { return { @@ -202,4 +211,3 @@ input { } - diff --git a/src/views/components-demo/dndList.vue b/src/views/components-demo/dndList.vue index b9779a31..9c8847a9 100644 --- a/src/views/components-demo/dndList.vue +++ b/src/views/components-demo/dndList.vue @@ -4,7 +4,7 @@ Vue.Draggable
- +
@@ -14,7 +14,7 @@ import DndList from '@/components/DndList' import { fetchList } from '@/api/article' export default { - name: 'dndList-demo', + name: 'DndListDemo', components: { DndList }, data() { return { @@ -37,4 +37,3 @@ export default { } - diff --git a/src/views/components-demo/dragDialog.vue b/src/views/components-demo/dragDialog.vue index 454d6327..0a023f90 100644 --- a/src/views/components-demo/dragDialog.vue +++ b/src/views/components-demo/dragDialog.vue @@ -1,15 +1,14 @@ @@ -13,7 +13,7 @@ import JsonEditor from '@/components/JsonEditor' const jsonData = '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]' export default { - name: 'jsonEditor-demo', + name: 'JsonEditorDemo', components: { JsonEditor }, data() { return { diff --git a/src/views/components-demo/markdown.vue b/src/views/components-demo/markdown.vue index 61a3b51f..f60911d0 100644 --- a/src/views/components-demo/markdown.vue +++ b/src/views/components-demo/markdown.vue @@ -2,14 +2,14 @@
Markdown is based on simplemde-markdown-editor ，Simply encapsulated in Vue. - + 相关文章
- +
- To HTML -
+ To HTML +
@@ -27,7 +27,7 @@ const content = ` ` export default { - name: 'markdown-demo', + name: 'MarkdownDemo', components: { MarkdownEditor }, data() { return { @@ -46,4 +46,3 @@ export default { } - diff --git a/src/views/components-demo/mixin.vue b/src/views/components-demo/mixin.vue index 78adb069..99b62468 100644 --- a/src/views/components-demo/mixin.vue +++ b/src/views/components-demo/mixin.vue @@ -7,19 +7,19 @@
- Components + Documentation - Charts + Icons - Excel + Excel - Table + Table - Form + Form Theme @@ -37,7 +37,7 @@
- 标题 + 标题
@@ -74,20 +74,20 @@ hover text
- +
- +
Share
- +
@@ -104,7 +104,7 @@ import DropdownMenu from '@/components/Share/dropdownMenu' import waves from '@/directive/waves/index.js' // 水波纹指令 export default { - name: 'componentMixin-demo', + name: 'ComponentMixinDemo', components: { PanThumb, MdInput, @@ -130,12 +130,11 @@ export default { title: [{ required: true, trigger: 'change', validator: validate }] }, articleList: [ - { title: '基础篇', href: 'https://segmentfault.com/a/1190000009275424' }, - { title: '登录权限篇', href: 'https://segmentfault.com/a/1190000009506097' }, - { title: '实战篇', href: 'https://segmentfault.com/a/1190000009762198' }, - { title: 'vueAdmin-template 篇', href: 'https://segmentfault.com/a/1190000010043013' }, - { title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' }, - { title: '优雅的使用 icon', href: 'https://segmentfault.com/a/https://segmentfault.com/a/1190000012213278' } + { title: '基础篇', href: 'https://juejin.im/post/59097cd7a22b9d0065fb61d2' }, + { title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' }, + { title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' }, + { title: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' }, + { title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' } ] } } diff --git a/src/views/components-demo/splitpane.vue b/src/views/components-demo/splitpane.vue index 5a0bfb2b..dcd87149 100644 --- a/src/views/components-demo/splitpane.vue +++ b/src/views/components-demo/splitpane.vue @@ -3,19 +3,19 @@ SplitPane If you've used codepen, jsfiddle will not be unfamiliar. - Github repository + Github repository - + @@ -27,7 +27,7 @@ import splitPane from 'vue-splitpane' export default { - name: 'splitpane-demo', + name: 'SplitpaneDemo', components: { splitPane }, methods: { resize() { diff --git a/src/views/components-demo/sticky.vue b/src/views/components-demo/sticky.vue index 49772bea..65cfb091 100644 --- a/src/views/components-demo/sticky.vue +++ b/src/views/components-demo/sticky.vue @@ -1,14 +1,14 @@ - diff --git a/src/views/dashboard/admin/components/LineChart.vue b/src/views/dashboard/admin/components/LineChart.vue index 9be9c92d..6c6637a8 100644 --- a/src/views/dashboard/admin/components/LineChart.vue +++ b/src/views/dashboard/admin/components/LineChart.vue @@ -1,5 +1,5 @@ diff --git a/src/views/dashboard/admin/components/TransactionTable.vue b/src/views/dashboard/admin/components/TransactionTable.vue index 7c79b77b..bcbfbb43 100644 --- a/src/views/dashboard/admin/components/TransactionTable.vue +++ b/src/views/dashboard/admin/components/TransactionTable.vue @@ -2,17 +2,17 @@ @@ -22,11 +22,6 @@ import { fetchList } from '@/api/transaction' export default { - data() { - return { - list: null - } - }, filters: { statusFilter(status) { const statusMap = { @@ -39,6 +34,11 @@ export default { return str.substring(0, 30) } }, + data() { + return { + list: null + } + }, created() { this.fetchData() }, diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue index 8da28543..1a79637a 100644 --- a/src/views/dashboard/admin/index.vue +++ b/src/views/dashboard/admin/index.vue @@ -1,48 +1,47 @@ - diff --git a/src/views/errorLog/errorTestB.vue b/src/views/errorLog/errorTestB.vue index a1303f89..b04c2511 100644 --- a/src/views/errorLog/errorTestB.vue +++ b/src/views/errorLog/errorTestB.vue @@ -1,5 +1,5 @@ diff --git a/src/views/errorPage/401.vue b/src/views/errorPage/401.vue index b8bbb013..d43be52d 100644 --- a/src/views/errorPage/401.vue +++ b/src/views/errorPage/401.vue @@ -1,10 +1,10 @@ @@ -30,7 +30,7 @@ import errGif from '@/assets/401_images/401.gif' export default { - name: 'page401', + name: 'Page401', data() { return { errGif: errGif + '?' + +new Date(), diff --git a/src/views/errorPage/404.vue b/src/views/errorPage/404.vue index dccf5736..c3eafea0 100644 --- a/src/views/errorPage/404.vue +++ b/src/views/errorPage/404.vue @@ -2,15 +2,15 @@
- 404 - 404 - 404 - 404 + 404 + 404 + 404 + 404
OOPS!
版权所有 - 华尔街见闻 + 华尔街见闻
{{ message }}
请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告
@@ -21,17 +21,9 @@ diff --git a/src/views/example/edit.vue b/src/views/example/edit.vue index 097b6140..c21af0c9 100644 --- a/src/views/example/edit.vue +++ b/src/views/example/edit.vue @@ -1,12 +1,12 @@ diff --git a/src/views/example/list.vue b/src/views/example/list.vue index 7dccafa6..f44d7078 100644 --- a/src/views/example/list.vue +++ b/src/views/example/list.vue @@ -1,41 +1,41 @@