fix site-root in production

we-social · Apr 25, 2018 · 5913cd1 · 5913cd1
1 parent 0a900df
commit 5913cd1
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 3 deletions.
diff --git a/site/.vuepress/components/story-make.vue b/site/.vuepress/components/story-make.vue
@@ -16,7 +16,7 @@
 
 <script>
 import Meta from '@story/meta.json'
-import req from '@utils/req'
+import req, { serverBase } from '@utils/req'
 
 export default {
   props: {
@@ -43,7 +43,7 @@ export default {
         }
       })
       .then(res => {
-        const src = this.$withBase(`/output/${res.outputFileName}`)
+        const src = `${serverBase}/output/${res.outputFileName}`
         this.$refs.imgBox.querySelector('img')
           .setAttribute('src', src)
         this.$message.success('已生成')

diff --git a/site/.vuepress/config.js b/site/.vuepress/config.js
@@ -1,8 +1,26 @@
 const { join } = require('path')
+const webpack = require('webpack')
+
+const env = Object.assign({}, process.env)
+
+// vueress中 base默认为`/`
+env.SITE_ROOT = env.SITE_ROOT || '/'
+
+// vuepress中 为避免用户容易漏掉末尾的`/` 如`/sorry` 导致非预期
+// 这里我们强制帮其补上 => `/sorry/` 另一种场景的实际需求也非常少
+env.SITE_ROOT = env.SITE_ROOT.replace(/\/*$/, '/')
+
+// 可指定server路径 默认同site路径
+env.SERVER_ROOT = env.SERVER_ROOT || env.SITE_ROOT
+
+const defineEnv = Object.keys(env).reduce((acc, k) => {
+  acc[`process.env.${k}`] = JSON.stringify(env[k])
+  return acc
+}, {})
 
 module.exports = {
   dest: join(__dirname, '../dist'),
-  base: process.env.SITE_ROOT || '/',
+  base: env.SITE_ROOT,
   locales: {
     '/': {
       lang: 'zh-CN',
@@ -23,6 +41,9 @@ module.exports = {
   ],
   serviceWorker: true,
   configureWebpack: {
+    plugins: [
+      new webpack.DefinePlugin(defineEnv)
+    ],
     resolve: {
       alias: {
         '@story': join(__dirname, '../../server/story'),

diff --git a/site/.vuepress/utils/req.js b/site/.vuepress/utils/req.js
@@ -2,8 +2,22 @@
 /* global dispatch */
 import request from './request'
 
+let serverBase = process.env.SERVER_ROOT
+
+// 为了满足url书写习惯 serverBase末尾不带`/` 而是传入的url带
+serverBase = serverBase.replace(/\/*$/, '')
+
+export { serverBase }
+
 export default async function req (opts) {
   opts = Object.assign({}, opts)
+
+  // 非完整的url 补充serverBase前缀
+  const isFullURL = /^(https?)?\/\//i.test(opts.url)
+  if (!isFullURL) {
+    opts.url = `${serverBase}${opts.url}`
+  }
+
   if (!opts.headers) {
     opts.headers = {}
   }