feat: public base path support

vitejs · May 5, 2020 · c82a597 · c82a597
1 parent f1c03ff
commit c82a597
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -264,7 +264,6 @@ Finally, because compilation is still done in Node, it can technically support a
 
 ## TODOs
 
-- Public base path support
 - Config file support (custom import maps and plugins)
 - Support TypeScript / Flow /(P)React JSX via [Sucrase](https://github.com/alangpierce/sucrase) or [esbuild](https://github.com/evanw/esbuild)
 

diff --git a/src/node/build.ts b/src/node/build.ts
@@ -21,8 +21,14 @@ import { isExternalUrl } from './utils'
 export interface BuildOptions {
   /**
    * Project root path on file system.
+   * Defaults to `process.cwd()`
    */
   root?: string
+  /**
+   * Base public path when served in production.
+   * Defaults to /
+   */
+  base?: string
   /**
    * If true, will be importing Vue from a CDN.
    * Dsiabled automatically when a local vue installation is present.
@@ -108,6 +114,7 @@ export async function build(options: BuildOptions = {}): Promise<BuildResult> {
 
   const {
     root = process.cwd(),
+    base = '/',
     cdn = !resolveVue(root).hasLocalVue,
     outDir = path.resolve(root, 'dist'),
     assetsDir = 'assets',
@@ -127,8 +134,9 @@ export async function build(options: BuildOptions = {}): Promise<BuildResult> {
   // importing it just for the types
   const rollup = require('rollup').rollup as typeof Rollup
   const indexPath = path.resolve(root, 'index.html')
-  const cssFileName = 'style.css'
+  const publicBasePath = base.replace(/([^/])$/, '$1/') // ensure ending slash
   const resolvedAssetsPath = path.join(outDir, assetsDir)
+  const cssFileName = 'style.css'
 
   const cwd = process.cwd()
   const writeFile = async (
@@ -191,9 +199,16 @@ export async function build(options: BuildOptions = {}): Promise<BuildResult> {
         __DEV__: 'false'
       }),
       // vite:css
-      createBuildCssPlugin(root, assetsDir, cssFileName, minify, assetsOptions),
+      createBuildCssPlugin(
+        root,
+        publicBasePath,
+        assetsDir,
+        cssFileName,
+        minify,
+        assetsOptions
+      ),
       // vite:asset
-      createBuildAssetPlugin(assetsDir, assetsOptions),
+      createBuildAssetPlugin(publicBasePath, assetsDir, assetsOptions),
       // minify with terser
       // modules: true and toplevel: true are implied with format: 'es'
       ...(minify ? [require('rollup-plugin-terser').terser()] : [])
@@ -213,7 +228,7 @@ export async function build(options: BuildOptions = {}): Promise<BuildResult> {
   let generatedIndex = indexContent && indexContent.replace(scriptRE, '').trim()
 
   const injectCSS = (html: string, filename: string) => {
-    const tag = `<link rel="stylesheet" href="/${path.posix.join(
+    const tag = `<link rel="stylesheet" href="${publicBasePath}${path.posix.join(
       assetsDir,
       filename
     )}">`
@@ -227,7 +242,7 @@ export async function build(options: BuildOptions = {}): Promise<BuildResult> {
   const injectScript = (html: string, filename: string) => {
     filename = isExternalUrl(filename)
       ? filename
-      : `/${path.posix.join(assetsDir, filename)}`
+      : `${publicBasePath}${path.posix.join(assetsDir, filename)}`
     const tag = `<script type="module" src="${filename}"></script>`
     if (/<\/body>/.test(html)) {
       return html.replace(/<\/body>/, `${tag}\n</body>`)

diff --git a/src/node/buildPluginAsset.ts b/src/node/buildPluginAsset.ts
@@ -18,14 +18,15 @@ const defaultAssetsOptions: AssetsOptions = {
 
 export const getAssetPublicPath = async (
   id: string,
+  publicBase: string,
   assetsDir: string,
   assetsOptions: AssetsOptions
 ) => {
   const ext = path.extname(id)
   const baseName = path.basename(id, ext)
   const resolvedFileName = `${baseName}.${hash_sum(id)}${ext}`
 
-  let url = slash(path.join('/', assetsDir, resolvedFileName))
+  let url = slash(path.join(publicBase, assetsDir, resolvedFileName))
   const content = await fs.readFile(id)
   if (!id.endsWith(`.svg`)) {
     if (content.length < assetsOptions.inlineThreshold!) {
@@ -55,6 +56,7 @@ export const registerAssets = (
 }
 
 export const createBuildAssetPlugin = (
+  publicBase: string,
   assetsDir: string,
   assetsOptions: AssetsOptions
 ): Plugin => {
@@ -66,6 +68,7 @@ export const createBuildAssetPlugin = (
       if (isStaticAsset(id)) {
         const { fileName, content, url } = await getAssetPublicPath(
           id,
+          publicBase,
           assetsDir,
           assetsOptions
         )

diff --git a/src/node/buildPluginCss.ts b/src/node/buildPluginCss.ts
@@ -8,12 +8,13 @@ import {
 import { loadPostcssConfig } from './config'
 import { isExternalUrl } from './utils'
 
-const debug = require('debug')('vite:css')
+const debug = require('debug')('vite:build:css')
 
 const urlRE = /(url\(\s*['"]?)([^"')]+)(["']?\s*\))/
 
 export const createBuildCssPlugin = (
   root: string,
+  publicBase: string,
   assetsDir: string,
   cssFileName: string,
   minify: boolean,
@@ -45,6 +46,7 @@ export const createBuildCssPlugin = (
             const file = path.join(fileDir, rawUrl)
             const { fileName, content, url } = await getAssetPublicPath(
               file,
+              publicBase,
               assetsDir,
               assetsOptions
             )