启用CDN
This commit is contained in:
xpnas
parent
ed5975df7d
commit
6e862ac968
@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "Inotify-vue",
|
"name": "inotify",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"description": "WebControl for Inotify",
|
"description": "WebControl for Inotify",
|
||||||
"author": "<mrdemonson@gmail.com>",
|
"author": "<mrdemonson@gmail.com>",
|
||||||
@ -15,18 +15,16 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "0.18.1",
|
"axios": "0.18.1",
|
||||||
"core-js": "3.6.5",
|
|
||||||
"echarts": "^4.9.0",
|
"echarts": "^4.9.0",
|
||||||
"element-plus": "^1.0.2-beta.32",
|
|
||||||
"element-ui": "2.13.2",
|
"element-ui": "2.13.2",
|
||||||
"js-cookie": "2.2.0",
|
"js-cookie": "2.2.0",
|
||||||
"moment": "^2.29.1",
|
|
||||||
"normalize.css": "7.0.0",
|
"normalize.css": "7.0.0",
|
||||||
"nprogress": "0.2.0",
|
"nprogress": "0.2.0",
|
||||||
"path-to-regexp": "2.4.0",
|
"path-to-regexp": "2.4.0",
|
||||||
|
"moment": "2.29.1",
|
||||||
"vue": "2.6.10",
|
"vue": "2.6.10",
|
||||||
"vue-router": "3.0.6",
|
"vuex": "3.1.0",
|
||||||
"vuex": "3.1.0"
|
"vue-router": "3.0.6"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/cli-plugin-babel": "4.4.4",
|
"@vue/cli-plugin-babel": "4.4.4",
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 1.1 KiB |
@ -1,17 +1,23 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<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">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
<title><%= webpackConfig.name %></title>
|
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
|
||||||
</head>
|
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
|
||||||
<body>
|
<% } %>
|
||||||
<noscript>
|
<title>
|
||||||
<strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
<%= webpackConfig.name %>
|
||||||
</noscript>
|
</title>
|
||||||
<div id="app"></div>
|
</head>
|
||||||
<!-- built files will be auto injected -->
|
|
||||||
</body>
|
<body>
|
||||||
</html>
|
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
|
||||||
|
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
|
||||||
|
<% } %>
|
||||||
|
<div id="app"></div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -1,8 +1,8 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
|
// import 'normalize.css/normalize.css' // A modern alternative to CSS resets
|
||||||
import ElementUI from 'element-ui'
|
import ElementUI from 'element-ui'
|
||||||
|
|
||||||
import 'element-ui/lib/theme-chalk/index.css'
|
// import 'element-ui/lib/theme-chalk/index.css'
|
||||||
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
|
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
|
||||||
|
|
||||||
import '@/styles/index.scss' // global css
|
import '@/styles/index.scss' // global css
|
||||||
@ -13,25 +13,7 @@ import router from './router'
|
|||||||
|
|
||||||
import '@/icons' // icon
|
import '@/icons' // icon
|
||||||
import '@/permission' // permission control
|
import '@/permission' // permission control
|
||||||
|
|
||||||
/**
|
|
||||||
* If you don't want to use mock-server
|
|
||||||
* you want to use MockJs for mock api
|
|
||||||
* you can execute: mockXHR()
|
|
||||||
*
|
|
||||||
* Currently MockJs will be used in the production environment,
|
|
||||||
* please remove it before going online ! ! !
|
|
||||||
*/
|
|
||||||
// if (process.env.NODE_ENV === 'production') {
|
|
||||||
// const { mockXHR } = require('../mock')
|
|
||||||
// mockXHR()
|
|
||||||
// }
|
|
||||||
|
|
||||||
// set ElementUI lang to EN
|
|
||||||
Vue.use(ElementUI, { locale, size: 'small' })
|
Vue.use(ElementUI, { locale, size: 'small' })
|
||||||
// 如果想要中文版 element-ui，按如下方式声明
|
|
||||||
// Vue.use(ElementUI)
|
|
||||||
|
|
||||||
Vue.config.productionTip = false
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
|
|||||||
@ -1,228 +1,45 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="wscn-http404-container">
|
<div class="circle">
|
||||||
<div class="wscn-http404">
|
<div><span class="block"></span><span>404</span><span class="block"></span></div>
|
||||||
<div class="pic-404">
|
|
||||||
<img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
|
|
||||||
<img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
|
|
||||||
<img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
|
|
||||||
<img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
|
|
||||||
</div>
|
|
||||||
<div class="bullshit">
|
|
||||||
<div class="bullshit__oops">OOPS!</div>
|
|
||||||
<div class="bullshit__info">All rights reserved
|
|
||||||
<a style="color:#20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
|
|
||||||
</div>
|
|
||||||
<div class="bullshit__headline">{{ message }}</div>
|
|
||||||
<div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
|
|
||||||
<a href="" class="bullshit__return-home">Back to home</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Page404',
|
name: 'Page404',
|
||||||
computed: {
|
computed: {
|
||||||
message() {
|
message() {
|
||||||
return 'The webmaster said that you can not enter this page...'
|
return 'The webmaster said that you can not enter this page...'
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style>
|
||||||
.wscn-http404-container{
|
.circle {
|
||||||
transform: translate(-50%,-50%);
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
border-radius: 200px;
|
||||||
|
border: 15px solid #b22727;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle > div {
|
||||||
|
color: #b22727;
|
||||||
|
font: bolder 50px arial;
|
||||||
|
transform: matrix(0.642788, -0.766044, 0.766044, 0.642788, 0, 95);
|
||||||
|
-ms-transform: matrix(0.642788, -0.766044, 0.766044, 0.642788, 0, 95);
|
||||||
|
-moz-transform: matrix(0.642788, -0.766044, 0.766044, 0.642788, 0, 95);
|
||||||
|
-o-transform: matrix(0.642788, -0.766044, 0.766044, 0.642788, 0, 95);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 40%;
|
top: 0;
|
||||||
left: 50%;
|
left: 0;
|
||||||
}
|
}
|
||||||
.wscn-http404 {
|
|
||||||
position: relative;
|
.block {
|
||||||
width: 1200px;
|
width: 60px;
|
||||||
padding: 0 50px;
|
display: inline-block;
|
||||||
overflow: hidden;
|
height: 15px;
|
||||||
.pic-404 {
|
background-color: #b22727;
|
||||||
position: relative;
|
margin: 12px 10px;
|
||||||
float: left;
|
|
||||||
width: 600px;
|
|
||||||
overflow: hidden;
|
|
||||||
&__parent {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
&__child {
|
|
||||||
position: absolute;
|
|
||||||
&.left {
|
|
||||||
width: 80px;
|
|
||||||
top: 17px;
|
|
||||||
left: 220px;
|
|
||||||
opacity: 0;
|
|
||||||
animation-name: cloudLeft;
|
|
||||||
animation-duration: 2s;
|
|
||||||
animation-timing-function: linear;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-delay: 1s;
|
|
||||||
}
|
|
||||||
&.mid {
|
|
||||||
width: 46px;
|
|
||||||
top: 10px;
|
|
||||||
left: 420px;
|
|
||||||
opacity: 0;
|
|
||||||
animation-name: cloudMid;
|
|
||||||
animation-duration: 2s;
|
|
||||||
animation-timing-function: linear;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-delay: 1.2s;
|
|
||||||
}
|
|
||||||
&.right {
|
|
||||||
width: 62px;
|
|
||||||
top: 100px;
|
|
||||||
left: 500px;
|
|
||||||
opacity: 0;
|
|
||||||
animation-name: cloudRight;
|
|
||||||
animation-duration: 2s;
|
|
||||||
animation-timing-function: linear;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-delay: 1s;
|
|
||||||
}
|
|
||||||
@keyframes cloudLeft {
|
|
||||||
0% {
|
|
||||||
top: 17px;
|
|
||||||
left: 220px;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
top: 33px;
|
|
||||||
left: 188px;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
80% {
|
|
||||||
top: 81px;
|
|
||||||
left: 92px;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
top: 97px;
|
|
||||||
left: 60px;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes cloudMid {
|
|
||||||
0% {
|
|
||||||
top: 10px;
|
|
||||||
left: 420px;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
top: 40px;
|
|
||||||
left: 360px;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
70% {
|
|
||||||
top: 130px;
|
|
||||||
left: 180px;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
top: 160px;
|
|
||||||
left: 120px;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes cloudRight {
|
|
||||||
0% {
|
|
||||||
top: 100px;
|
|
||||||
left: 500px;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
top: 120px;
|
|
||||||
left: 460px;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
80% {
|
|
||||||
top: 180px;
|
|
||||||
left: 340px;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
top: 200px;
|
|
||||||
left: 300px;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.bullshit {
|
|
||||||
position: relative;
|
|
||||||
float: left;
|
|
||||||
width: 300px;
|
|
||||||
padding: 30px 0;
|
|
||||||
overflow: hidden;
|
|
||||||
&__oops {
|
|
||||||
font-size: 32px;
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: 40px;
|
|
||||||
color: #1482f0;
|
|
||||||
opacity: 0;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
animation-name: slideUp;
|
|
||||||
animation-duration: 0.5s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
}
|
|
||||||
&__headline {
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 24px;
|
|
||||||
color: #222;
|
|
||||||
font-weight: bold;
|
|
||||||
opacity: 0;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
animation-name: slideUp;
|
|
||||||
animation-duration: 0.5s;
|
|
||||||
animation-delay: 0.1s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
}
|
|
||||||
&__info {
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 21px;
|
|
||||||
color: grey;
|
|
||||||
opacity: 0;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
animation-name: slideUp;
|
|
||||||
animation-duration: 0.5s;
|
|
||||||
animation-delay: 0.2s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
}
|
|
||||||
&__return-home {
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
width: 110px;
|
|
||||||
height: 36px;
|
|
||||||
background: #1482f0;
|
|
||||||
border-radius: 100px;
|
|
||||||
text-align: center;
|
|
||||||
color: #ffffff;
|
|
||||||
opacity: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 36px;
|
|
||||||
cursor: pointer;
|
|
||||||
animation-name: slideUp;
|
|
||||||
animation-duration: 0.5s;
|
|
||||||
animation-delay: 0.3s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
}
|
|
||||||
@keyframes slideUp {
|
|
||||||
0% {
|
|
||||||
transform: translateY(60px);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateY(0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -6,24 +6,48 @@ function resolve(dir) {
|
|||||||
return path.join(__dirname, dir)
|
return path.join(__dirname, dir)
|
||||||
}
|
}
|
||||||
|
|
||||||
const name = defaultSettings.title || 'Inotify' // page title
|
const name = defaultSettings.title || 'Inotify'
|
||||||
|
const port = process.env.port || process.env.npm_config_port || 9528
|
||||||
|
|
||||||
// If your port is set to 80,
|
const axiosV = require('axios/package.json').version
|
||||||
// use administrator privileges to execute the command line.
|
const echartsV = require('echarts/package.json').version
|
||||||
// For example, Mac: sudo npm run
|
const elementV = require('element-ui/package.json').version
|
||||||
// You can change the port by the following methods:
|
const jscookieV = require('js-cookie/package.json').version
|
||||||
// port = 9528 npm run dev OR npm run dev --port = 9528
|
const normalizeV = require('normalize.css/package.json').version
|
||||||
const port = process.env.port || process.env.npm_config_port || 9528 // dev port
|
const vueV = require('vue/package.json').version
|
||||||
|
const routerV = require('vue-router/package.json').version
|
||||||
|
const vuexV = require('vuex/package.json').version
|
||||||
|
const cookieV = require('js-cookie/package.json').version
|
||||||
|
const nprogressV = require('nprogress/package.json').version
|
||||||
|
const momentV = require('moment/package.json').version
|
||||||
|
const cdn = {
|
||||||
|
externals: {
|
||||||
|
axios: 'axios',
|
||||||
|
echarts: 'echarts',
|
||||||
|
'element-ui': 'ELEMENT',
|
||||||
|
moment: 'moment',
|
||||||
|
locale: 'locale',
|
||||||
|
vue: 'Vue',
|
||||||
|
vuex: 'Vuex',
|
||||||
|
'vue-router': 'VueRouter'
|
||||||
|
},
|
||||||
|
css: [`https://cdn.bootcdn.net/ajax/libs/element-ui/${elementV}/theme-chalk/index.css`, `https://cdn.bootcdn.net/ajax/libs/nprogress/${nprogressV}/nprogress.min.css`, `https://lib.baomitu.com/normalize/${normalizeV}/normalize.css`],
|
||||||
|
js: [
|
||||||
|
`https://cdn.bootcdn.net/ajax/libs/vue/${vueV}/vue.min.js`,
|
||||||
|
`https://cdn.bootcdn.net/ajax/libs/vuex/${vuexV}/vuex.min.js`,
|
||||||
|
`https://cdn.bootcdn.net/ajax/libs/js-cookie/${jscookieV}/js.cookie.js`,
|
||||||
|
`https://cdn.bootcdn.net/ajax/libs/element-ui/${elementV}/index.js`,
|
||||||
|
`https://cdn.bootcdn.net/ajax/libs/axios/${axiosV}/axios.min.js`,
|
||||||
|
`https://cdn.bootcdn.net/ajax/libs/moment.js/${momentV}/moment.min.js`,
|
||||||
|
`https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0-rc.1/echarts.min.js`,
|
||||||
|
`https://cdn.bootcdn.net/ajax/libs/vue-router/${routerV}/vue-router.min.js`,
|
||||||
|
`https://cdn.bootcdn.net/ajax/libs/element-ui/${elementV}/locale/zh-CN.js`,
|
||||||
|
`https://cdn.bootcdn.net/ajax/libs/js-cookie/${cookieV}/js.cookie.min.js`,
|
||||||
|
`https://cdn.bootcdn.net/ajax/libs/nprogress/${nprogressV}/nprogress.min.js`
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
// All configuration item explanations can be find in https://cli.vuejs.org/config/
|
|
||||||
module.exports = {
|
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: '/',
|
publicPath: '/',
|
||||||
outputDir: '../Inotify/wwwroot',
|
outputDir: '../Inotify/wwwroot',
|
||||||
assetsDir: 'static',
|
assetsDir: 'static',
|
||||||
@ -39,9 +63,6 @@ module.exports = {
|
|||||||
before: require('./mock/mock-server.js')
|
before: require('./mock/mock-server.js')
|
||||||
},
|
},
|
||||||
configureWebpack: {
|
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: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
'@': resolve('src')
|
'@': resolve('src')
|
||||||
@ -49,19 +70,23 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
devtool: 'source-map',
|
devtool: 'source-map',
|
||||||
performance: {
|
performance: {
|
||||||
hints: 'warning', // 枚举
|
hints: 'warning',
|
||||||
hints: 'error', // 性能提示中抛出错误
|
hints: 'error',
|
||||||
hints: false, // 关闭性能提示
|
hints: false,
|
||||||
maxAssetSize: 200000, // 整数类型（以字节为单位）
|
maxAssetSize: 200000,
|
||||||
maxEntrypointSize: 400000, // 整数类型（以字节为单位）
|
maxEntrypointSize: 400000,
|
||||||
assetFilter: function(assetFilename) {
|
assetFilter: function(assetFilename) {
|
||||||
// 提供资源文件名的断言函数
|
|
||||||
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js')
|
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js')
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
externals: cdn.externals
|
||||||
},
|
},
|
||||||
chainWebpack(config) {
|
chainWebpack(config) {
|
||||||
// it can improve the speed of the first screen, it is recommended to turn on preload
|
config.plugin('html').tap(args => {
|
||||||
|
args[0].cdn = cdn
|
||||||
|
return args
|
||||||
|
})
|
||||||
|
|
||||||
config.plugin('preload').tap(() => [
|
config.plugin('preload').tap(() => [
|
||||||
{
|
{
|
||||||
rel: 'preload',
|
rel: 'preload',
|
||||||
@ -72,10 +97,7 @@ module.exports = {
|
|||||||
}
|
}
|
||||||
])
|
])
|
||||||
|
|
||||||
// when there are many pages, it will cause too many meaningless requests
|
|
||||||
config.plugins.delete('prefetch')
|
config.plugins.delete('prefetch')
|
||||||
|
|
||||||
// set svg-sprite-loader
|
|
||||||
config.module
|
config.module
|
||||||
.rule('svg')
|
.rule('svg')
|
||||||
.exclude.add(resolve('src/icons'))
|
.exclude.add(resolve('src/icons'))
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user