oss

.env.app

@@ -1,6 +1,6 @@
 VUE_APP_BASE_URL=https://www.raex.vip
 NODE_ENV=production
-PUBLIC_PATH=./
+VUE_APP_PUBLIC_PATH=./
 ASSETS_PATH=raex
 TITLE=绿洲宇宙
 VUE_APP_CORDOVA=true

.env.app_test

@@ -1,6 +1,6 @@
 VUE_APP_BASE_URL=https://test.raex.vip
 NODE_ENV=production
-PUBLIC_PATH=./
+VUE_APP_PUBLIC_PATH=./
 ASSETS_PATH=raex
 TITLE=绿洲宇宙
 VUE_APP_CORDOVA=true

.env.development

@@ -1,6 +1,6 @@
 VUE_APP_BASE_URL=https://test.raex.vip
 NODE_ENV=development
-PUBLIC_PATH=/
+VUE_APP_PUBLIC_PATH=/
 ASSETS_PATH=raex
 TITLE=绿洲宇宙
 VUE_APP_PAGE_TYPE=raex

.env.production

@@ -1,6 +1,6 @@
 VUE_APP_BASE_URL=/
 NODE_ENV=production
-PUBLIC_PATH=/9th/
+VUE_APP_PUBLIC_PATH=/9th/
 ASSETS_PATH=raex
 TITLE=绿洲宇宙
 VUE_APP_PAGE_TYPE=raex

.gitignore

@@ -21,3 +21,5 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+publicPath

package.json

@@ -12,6 +12,7 @@
         "@better-scroll/core": "^2.4.2",
         "@chenfengyuan/vue-qrcode": "^2.0.0-rc.1",
         "@vant/area-data": "^1.1.3",
+        "ali-oss": "^6.16.0",
         "axios": "^0.21.4",
         "better-scroll": "^2.4.2",
         "clipboard": "^2.0.8",
@@ -27,6 +28,7 @@
         "mitt": "^3.0.0",
         "qrcode": "^1.4.4",
         "query-string": "^7.0.1",
+        "queue": "^6.0.2",
         "register-service-worker": "^1.7.1",
         "swiper": "^6.8.1",
         "three": "^0.136.0",

src/router/index.js

@@ -498,7 +498,10 @@ const routes = [
 ];
 
 const router = createRouter({
-    history: process.env.VUE_APP_CORDOVA === 'true' ? createWebHashHistory() : createWebHistory(process.env.BASE_URL),
+    history:
+        process.env.VUE_APP_CORDOVA === 'true'
+            ? createWebHashHistory()
+            : createWebHistory(process.env.VUE_APP_PUBLIC_PATH),
     routes,
     scrollBehavior(to, from, savedPosition) {
         return { x: 0, y: 0 };

upload.js

@@ -0,0 +1,46 @@
+const OSS = require('ali-oss');
+const queue = require('queue');
+const fs = require('fs');
+const path = require('path');
+
+let client = new OSS({
+    region: 'oss-cn-shenzhen',
+    accessKeyId: 'LTAI5tPoBCiEMSDaS1Q4HKr9',
+    accessKeySecret: 'F8ZNiqdH35T7gikBkn6Fq8tgbvdY88',
+    bucket: 'raex-meta'
+});
+
+class UploadCDNPlugin {
+    constructor(basePath) {
+        this.basePath = basePath + '/';
+    }
+    // Define `apply` as its prototype method which is supplied with compiler as its argument
+    apply(compiler) {
+        compiler.hooks.done.tapAsync('UploadPlugin', (stats, callback) => {
+            let basePath = this.basePath;
+            const q = queue({ results: [], concurrency: 16 });
+            function uploadDir(dir) {
+                fs.readdirSync(dir).forEach(child => {
+                    if (/^\./.test(child)) return;
+                    let file = path.resolve(dir, child);
+                    let stat = fs.statSync(file);
+                    if (stat.isDirectory()) {
+                        uploadDir(file);
+                    } else {
+                        q.push(async cb => {
+                            let relpath = path.relative(path.resolve(__dirname, 'dist'), file);
+                            const result = await client.put(path.normalize(basePath + relpath), file);
+                            console.log(result);
+                            cb();
+                        });
+                    }
+                });
+            }
+            uploadDir(path.resolve(__dirname, 'dist'));
+            q.start(() => {
+                callback();
+            });
+        });
+    }
+}
+module.exports = UploadCDNPlugin;

vue.config.js

@@ -1,6 +1,20 @@
 const path = require('path');
+const fs = require('fs');
+const UploadPlugin = require('./upload');
+let publicPath;
+switch (process.env.NODE_ENV) {
+    case 'development':
+        publicPath = '/';
+        break;
+    case 'production':
+        publicPath = `https://raex-meta.oss-cn-shenzhen.aliyuncs.com/www/` + new Date().getTime();
+        break;
+    case 'test':
+        publicPath = `https://raex-meta.oss-cn-shenzhen.aliyuncs.com/www_test/` + new Date().getTime();
+        break;
+}
 module.exports = {
-    publicPath: process.env.PUBLIC_PATH || '/',
+    publicPath: publicPath,
     devServer: {
         port: 8082,
         disableHostCheck: true
@@ -12,6 +26,9 @@ module.exports = {
         }
     },
     chainWebpack: config => {
+        config
+            .plugin('upload')
+            .use(new UploadPlugin(publicPath.replace('https://raex-meta.oss-cn-shenzhen.aliyuncs.com/', '')));
         config.output.filename('[name].[hash].js').end();
         config.resolve.alias.set('@assets', path.resolve(__dirname, 'src', 'assets'));
         config.plugin('html').tap(args => {