项目根路径可动态修改

vue/public/index.html

@@ -38,7 +38,7 @@
 
 <!--echarts-->
 <script defer src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
-<script defer src="/static/echarts/macarons.js"></script>
+<script defer src="<%= BASE_URL %>static/echarts/macarons.js"></script>
 
 <!--两种图片预览插件-->
 <link href="https://cdn.bootcss.com/photoswipe/4.1.3/photoswipe.min.css" rel="stylesheet">
@@ -49,8 +49,8 @@
 <script async src="https://cdn.bootcss.com/viewerjs/1.5.0/viewer.min.js"></script>
 
 <!--excel-->
-<script async src="/static/js/xlsx.full.min.js"></script>
+<script async src="<%= BASE_URL %>static/js/xlsx.full.min.js"></script>
-<script async src="/static/js/exceljs.min.js"></script>
+<script async src="<%= BASE_URL %>static/js/exceljs.min.js"></script>
 
 <!--富文本-->
 <script async src="https://cdn.bootcdn.net/ajax/libs/tinymce/5.3.1/tinymce.min.js"></script>

vue/src/components/PuzzleVerify/main.vue

@@ -53,6 +53,9 @@
 </template>
 
 <script>
+    import BtnStopImage from './image/btn_stop.png'
+    import BtnMoveImage from './image/btn_move.png'
+
     /*
     * https://github.com/Kevin-269581661/vue-puzzle-verification
     * 网上搬的例子，实际开发建议用极验
@@ -120,10 +123,11 @@
                 const showResultTip = ['success', 'fail'].includes(this.stat)
                 return ['verify-result', `verify-${this.stat}`, showResultTip ? 'show-result' : '']
             },
+
             sliderBtnStyle() {
                 return {
                     ...this.sliderStyle,
-                    'background-position': this.stat === 'move' ? '0 31.0992%' : '0 11.79625%'
+                    'background-image': `url(${this.stat === 'move' ? BtnMoveImage : BtnStopImage})`
                 }
             }
         },
@@ -134,9 +138,11 @@
                 this.clear()
                 this.reject()
             },
+
             refresh() {
                 this.initImage().then(() => this.initCanvas())
             },
+
             initCanvas() {
                 this.clear()
                 let MinX = this.padding + this.blockSize
@@ -217,6 +223,7 @@
                 ctx_s.shadowColor = "black"
                 ctx_s.fill()
             },
+
             initImage() {
                 const imageListTemp = [
                     "https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4018557288,1217151095&fm=26&gp=0.jpg",
@@ -228,6 +235,7 @@
                 this.image.src = imageListTemp[imgRandomIndex]
                 return new Promise(resolve => resolve())
             },
+
             drawImage(fun) {
                 let img = new Image()
                 img.src = this.image.src
@@ -236,6 +244,7 @@
                     this.image.loading = false
                 }
             },
+
             clear() {
                 this.stat = 'ready'
                 let c = this.$refs.puzzleBox
@@ -245,12 +254,15 @@
                 c_l.setAttribute("height", c.getAttribute("height"))
                 c_s.setAttribute("height", c.getAttribute("height"))
             },
+
             moveStart(e) {
+                if (this.stat !== 'ready') return
                 e.preventDefault()
                 e.stopPropagation()
                 this.moveStartAtX = e.type === 'mousedown' ? e.pageX : e.changedTouches[0].pageX
                 this.addListener()
             },
+
             moving(e) {
                 this.stat = 'move'
                 const pageX = e.type === 'mousemove' ? e.pageX : e.changedTouches[0].pageX
@@ -263,6 +275,7 @@
                 this.sliderStyle.left = distance + "px"
                 this.sliderStyle.transition = "inherit"
             },
+
             moveEnd(e) {
                 const pageX = e.type === 'mouseup' ? e.pageX : e.changedTouches[0].pageX
                 const distance = pageX - this.moveStartAtX
@@ -286,6 +299,7 @@
                 this.moveStartAtX = null
                 this.removeListener()
             },
+
             addListener() {
                 if (this.image.loading) return
                 document.addEventListener("mousemove", this.moving)
@@ -293,12 +307,14 @@
                 document.addEventListener("touchmove", this.moving)
                 document.addEventListener("touchend", this.moveEnd)
             },
+
             removeListener() {
                 document.removeEventListener("mousemove", this.moving)
                 document.removeEventListener("mouseup", this.moveEnd)
                 document.addEventListener("touchmove", this.moving)
                 document.addEventListener("touchend", this.moveEnd)
             },
+
             handleAfterLeave() {
                 this.$destroy(true)
                 this.$el.parentNode.removeChild(this.$el)

vue/src/components/PuzzleVerify/style.scss

@@ -39,15 +39,6 @@
         }
     }
 
-    .puzzle-view .puzzle-image-loading__icon,
-    .slider-container,
-    .slider-container .slider-btn,
-    .puzzle-footer .puzzle-small .puzzle-close,
-    .puzzle-footer .puzzle-small .puzzle-refresh {
-        background-repeat: no-repeat;
-        background-image: url(/static/img/sprite.1.2.4.png);
-    }
-
     .puzzle-view {
         position: relative;
         overflow: hidden;
@@ -63,8 +54,9 @@
             padding-top: 10%;
 
             &__icon {
-                background-size: 764.70588%;
+                /*background-size: 764.70588%;
-                background-position: 0 70.70218%;
+                background-position: 0 70.70218%;*/
+                background-image: url(./image/loading.png);
                 margin: 11% auto 10px;
                 width: 34px;
                 height: 26px;
@@ -131,8 +123,7 @@
         width: 93.52%;
         padding: 0 0 13.67% 0;
         background-color: white;
-        background-size: 100%;
+        background-image: url(./image/track.png);
-        background-position: 0 0;
 
         .slider-track {
             position: absolute;
@@ -160,7 +151,6 @@
             width: 25.38%;
             padding: 0 0 25.38% 0;
             cursor: pointer;
-            background-size: 393.93939%;
         }
     }
 
@@ -191,16 +181,16 @@
                 height: 0;
                 padding-bottom: 17.8%;
                 overflow: hidden;
-                background-size: 1300%;
             }
 
             .puzzle-close {
                 margin-left: 0;
-                background-position: 0 44.86874%;
+                background-image: url(./image/icon_close.png);
             }
 
             .puzzle-refresh {
-                background-position: 0 81.38425%;
+                background: url(./image/icon_refresh_top.png) top center no-repeat,
+                url(./image/icon_refresh_bottom.png) center bottom no-repeat;
             }
         }
     }

vue/src/components/SearchForm/index.vue

@@ -31,6 +31,7 @@
             handleCollapse() {
                 this.collapse = !this.collapse
             },
+
             getElementNumInRow() {
                 const vw = getElementInnerWidth(this.$el.parentNode)
 
@@ -42,6 +43,7 @@
 
                 return Math.floor(24 / lineNum)
             },
+
             resize() {
                 const num = this.getElementNumInRow()
                 this.num = num

vue/src/components/TinymceEditor/index.vue

@@ -9,10 +9,11 @@
 <script>
     import {waitUntilSuccess} from "@/utils"
     import {elError} from "@/utils/message"
+    import {getContextPath} from "@/utils/browser"
 
     const DEFAULT_OPTIONS = {
         language: 'zh_CN',
-        language_url: '/static/tinymce/langs/zh_CN.js',
+        language_url: `${getContextPath()}static/tinymce/langs/zh_CN.js`,
         object_resizing: false,
         end_container_on_empty_block: true,
         default_link_target: '_blank',

vue/src/components/UploadFile/index.vue

@@ -62,6 +62,7 @@
     import {elError} from "@/utils/message"
     import {isImage, isDoc, isPdf, isPpt, isRar, isXls, isTxt, isZip} from "@/utils/validate"
     import {preview, deleteUpload, download, upload, autoCompleteUrl} from "@/utils/file"
+    import {getContextPath} from "@/utils/browser"
 
     function parseMaxSize(maxSize) {
         if (typeof maxSize === 'number') {
@@ -82,13 +83,14 @@
 
     function getCoverImage(url, fileType) {
         if (isImage(fileType)) return url
-        if (isDoc(fileType)) return '/static/img/fileType/docx.png'
+        else if (isDoc(fileType)) url = `${getContextPath()}static/img/fileType/doc.png`
-        if (isPdf(fileType)) return '/static/img/fileType/pdf.png'
+        else if (isPdf(fileType)) url = `${getContextPath()}static/img/fileType/pdf.png`
-        if (isPpt(fileType)) return '/static/img/fileType/ppt.png'
+        else if (isPpt(fileType)) url = `${getContextPath()}static/img/fileType/ppt.png`
-        if (isRar(fileType)) return '/static/img/fileType/rar.png'
+        else if (isRar(fileType)) url = `${getContextPath()}static/img/fileType/rar.png`
-        if (isXls(fileType)) return '/static/img/fileType/xls.png'
+        else if (isXls(fileType)) url = `${getContextPath()}static/img/fileType/xls.png`
-        if (isTxt(fileType)) return '/static/img/fileType/txt.png'
+        else if (isTxt(fileType)) url = `${getContextPath()}static/img/fileType/txt.png`
-        if (isZip(fileType)) return '/static/img/fileType/zip.png'
+        else if (isZip(fileType)) url = `${getContextPath()}static/img/fileType/zip.png`
+        return url
     }
 
     export default {

vue/src/config/index.js

@@ -1,8 +1,13 @@
 const isDevelopment = process.env.NODE_ENV === 'development'
 
+const contextPath = '/'
+
 module.exports = {
     title: 'BiuBiuBiu~',
 
+    //项目的部署路径
+    contextPath,
+
     //全局axios的baseUrl
     apiPrefix: '/api',
 
@@ -35,5 +40,5 @@ module.exports = {
     filePreviewPrefix: isDevelopment ? 'http://localhost:8012' : 'https://preview.toesbieya.cn',
 
     //省市地区json数据请求地址
-    regionDataUrl: '/static/json/region-pcas.json'
+    regionDataUrl: `${contextPath}static/json/region-pcas.json`
 }

vue/src/layout/index.vue

@@ -2,13 +2,15 @@
     <section class="el-container app-wrapper">
         <v-sidebar/>
 
-        <section class="el-container main-container" :class="{'has-header':hasHeader,'has-tags-view':useTagsView}">
+        <section :class="containerClass">
             <v-header/>
             <v-main/>
         </section>
 
         <!--移动端侧边栏展开时的遮罩-->
-        <div v-show="showSidebarMask" class="drawer-bg" @click.stop.prevent="collapseSidebar"/>
+        <transition name="el-fade-in-linear">
+            <div v-if="showSidebarMask" class="drawer-bg" @click.stop.prevent="collapseSidebar"/>
+        </transition>
     </section>
 </template>
 
@@ -46,6 +48,15 @@
                 isLogin: state => !isEmpty(state.id) && !isEmpty(state.token)
             }),
 
+            containerClass() {
+                return {
+                    'el-container': true,
+                    'main-container': true,
+                    'has-header': this.hasHeader,
+                    'has-tags-view': this.useTagsView
+                }
+            },
+
             showOfflineTip() {
                 return !this.online && this.isLogin
             },
@@ -77,12 +88,12 @@
         flex-direction: row;
 
         .drawer-bg {
-            background: #000;
+            background: rgba(0, 0, 0, .5);
-            opacity: 0.3;
+            backdrop-filter: blur(10px);
             width: 100%;
             top: 0;
             height: 100%;
-            position: absolute;
+            position: fixed;
             z-index: 9;
         }
 

vue/src/plugin/canvasAnimation/particleBall/index.js

@@ -1,4 +1,5 @@
 import Particle from "./Particle"
+import {getContextPath} from "@/utils/browser"
 
 export default class ParticleBall {
     constructor(canvas, {sphereRad = 130, fLen = 300, maxParticle = 400, turnSpeed = 0.005} = {}) {
@@ -80,8 +81,8 @@ export default class ParticleBall {
     initDot() {
         this.dotImageList = []
         for (let i = 1; i <= 4; i++) {
-            let dotImage = new Image()
+            const dotImage = new Image()
-            dotImage.src = "/static/img/dot" + i + ".png"
+            dotImage.src = `${getContextPath()}static/img/dot${i}.png`
             this.dotImageList.push(dotImage)
         }
     }

vue/src/plugin/imageCompress/cjpeg.js

@@ -1,7 +1,8 @@
 import {createWorker} from "@/utils/worker"
+import {getContextPath} from "@/utils/browser"
 
 export default function (uint8Array, quality = 75) {
-    const url = document.location.protocol + '//' + document.location.host
+    const url = `${getContextPath()}static/js/cjpeg.min.js`
     return new Promise(resolve => {
         let worker = createWorker(handler, {url, data: uint8Array, quality}, ({data}) => {
             resolve(data)
@@ -13,7 +14,7 @@ export default function (uint8Array, quality = 75) {
 function handler() {
     addEventListener('message', e => {
         const {url, data, quality} = e.data
-        importScripts(url + '/static/js/cjpeg.min.js')
+        importScripts(url)
         const start = performance.now()
         const result = cjpeg(data, ['-quality', quality])
         postMessage({time: performance.now() - start, data: result.data})

vue/src/plugin/imageCompress/pngquant.js

@@ -1,7 +1,8 @@
 import {createWorker} from "@/utils/worker"
+import {getContextPath} from "@/utils/browser"
 
 export default function (uint8Array, quality = 75, speed = 4) {
-    const url = document.location.protocol + '//' + document.location.host
+    const url = `${getContextPath()}static/js/pngquant.min.js`
     return new Promise(resolve => {
         let worker = createWorker(handler, {url, data: uint8Array, quality, speed}, ({data}) => {
             resolve(data)
@@ -13,7 +14,7 @@ export default function (uint8Array, quality = 75, speed = 4) {
 function handler() {
     addEventListener('message', e => {
         const {url, data, quality, speed} = e.data
-        importScripts(url + '/static/js/pngquant.min.js')
+        importScripts(url)
         const start = performance.now()
         const result = pngquant(data, {quality: quality.join('-'), speed: speed + ''}, () => ({}))
         postMessage({time: performance.now() - start, data: result.data})

vue/src/router/index.js

@@ -18,7 +18,7 @@ import NProgress from 'nprogress'
 import {isUserExist} from "@/utils/storage"
 import {auth, needAuth} from "@/utils/auth"
 import {getPageTitle, transformWhiteList, metaExtend} from './util'
-import {routerMode} from '@/config'
+import {contextPath, routerMode} from '@/config'
 import constantRoutes from '@/router/constant'
 import authorityRoutes from '@/router/authority'
 
@@ -34,6 +34,7 @@ metaExtend(constantRoutes)
 metaExtend(authorityRoutes)
 
 const router = new Router({
+    base: contextPath,
     mode: routerMode,
     scrollBehavior: () => ({y: 0}),
     routes: constantRoutes.concat(authorityRoutes, endRoute)
@@ -64,6 +65,7 @@ router.beforeEach(async (to, from, next) => {
         iframeControl(to)
         return next()
     }
+
     //用户无权限访问时的动作
     next({path: '/403'})
 })
@@ -80,7 +82,7 @@ function initMenu() {
 
 //判断是否需要打开iframe
 function iframeControl(route) {
-    let operate = route.meta.iframe ? 'open' : 'close'
+    const operate = route.meta.iframe ? 'open' : 'close'
     store.dispatch(`iframe/${operate}`, route.meta.iframe)
 }
 

vue/src/store/modules/resource.js

@@ -25,8 +25,8 @@ const state = {
 
 const mutations = {
     routes(state, routes) {
-        let tempConstantRoutes = JSON.parse(JSON.stringify(finalConstantRoutes))
+        const tempConstantRoutes = JSON.parse(JSON.stringify(finalConstantRoutes))
-        let tempAuthorityRoutes = JSON.parse(JSON.stringify(routes))
+        const tempAuthorityRoutes = JSON.parse(JSON.stringify(routes))
 
         clean(tempConstantRoutes)
         clean(tempAuthorityRoutes)
@@ -61,7 +61,7 @@ const actions = {
     initRoutes({commit}, user) {
         const {resources, admin} = user
         return new Promise(resolve => {
-            let accessedRoutes = getAuthorizedRoutes({resources, admin})
+            const accessedRoutes = getAuthorizedRoutes({resources, admin})
             commit('routes', accessedRoutes)
             commit('hasInitRoutes', true)
             resolve()
@@ -81,7 +81,7 @@ const actions = {
 
 //在原始路由数组基础上添加全路径
 function transformOriginRoutes(routes) {
-    let res = JSON.parse(JSON.stringify(routes))
+    const res = JSON.parse(JSON.stringify(routes))
 
     addFullPath(res)
 
@@ -121,7 +121,7 @@ function addFullPath(routes, basePath = '/') {
 function getAuthorizedRoutes({resources, admin}) {
     if (admin === 1) return finalAuthorityRoutes
     if (!resources) return []
-    let arr = JSON.parse(JSON.stringify(finalAuthorityRoutes))
+    const arr = JSON.parse(JSON.stringify(finalAuthorityRoutes))
     filter(arr, i => !needAuth(i) || i.fullPath in resources)
     return arr
 }

vue/src/utils/browser.js

@@ -36,3 +36,9 @@ export function getElementHeight(ele, style) {
 
     return height
 }
+
+//获取项目部署的绝对路径
+export function getContextPath() {
+    const {protocol, host} = document.location
+    return `${protocol}//${host}${process.env.BASE_URL}`
+}

vue/src/views/example/components/picturePreviewExample/PhotoSwipe.vue

@@ -70,10 +70,10 @@
     /*
     * https://photoswipe.com/
     * 需要加载以下文件
-    * /static/photoSwipe/photoswipe.css
+    * photoSwipe/photoswipe.css
-    * /static/photoSwipe/default-skin/default-skin.css
+    * photoSwipe/default-skin/default-skin.css
-    * /static/photoSwipe/photoswipe.js
+    * photoSwipe/photoswipe.js
-    * /static/photoSwipe/photoswipe-ui-default.js
+    * photoSwipe/photoswipe-ui-default.js
     * */
 
     export default {

vue/src/views/example/cool/l2d.vue

@@ -9,6 +9,8 @@
 </template>
 
 <script>
+    import {getContextPath} from "@/utils/browser"
+
     /**
      * 加载js或css
      * @param url
@@ -49,7 +51,7 @@
         mounted() {
             //注意：live2d_path 参数应使用绝对路径
             //const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/"
-            const live2d_path = "/static/live2d/"
+            const live2d_path = `${getContextPath()}static/live2d/`
 
             // 加载 waifu.css live2d.min.js waifu-tips.js
             Promise.all([

vue/vue.config.js

@@ -4,23 +4,24 @@ const settings = require('./src/config')
 const CompressionWebpackPlugin = require('compression-webpack-plugin')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
+const isDev = process.env.NODE_ENV === 'development'
+
 function resolve(dir) {
     return path.join(__dirname, dir)
 }
 
-const port = process.env.port || 8079 // dev port
-
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
-    publicPath: settings.routerMode === 'history' ? '/' : './',
+    publicPath: settings.contextPath,
     outputDir: 'dist',
     assetsDir: 'static',
     runtimeCompiler: true,
     lintOnSave: false,
-    productionSourceMap: process.env.NODE_ENV === 'development',
+    productionSourceMap: isDev,
     parallel: true,
     devServer: {
-        port,
+        port: process.env.port || 8079,
+        contentBasePublicPath: settings.contextPath,
         open: true,
         overlay: {
             warnings: true,
@@ -58,7 +59,7 @@ module.exports = {
                 minRatio: 0.8,
                 deleteOriginalAssets: false,//是否删除源文件
             }),
-            process.env.NODE_ENV === 'production' ? new BundleAnalyzerPlugin() : {apply: () => ({})}
+            isDev ? {apply: () => ({})} : new BundleAnalyzerPlugin()
         ]
     },
     chainWebpack(config) {