feat(build): support custom `assetsDir` (#2497)

docs/reference/site-config.md

@@ -290,6 +290,19 @@ export default {
 }
 ```
 
+### assetsDir
+
+- Type: `string`
+- Default: `assets`
+
+The directory for assets files. See also: [assetsDir](https://vitejs.dev/config/build-options.html#build-assetsdir).
+
+```ts
+export default {
+  assetsDir: 'static'
+}
+```
+
 ### cacheDir
 
 - Type: `string`

src/client/app/utils.ts

@@ -58,7 +58,10 @@ export function pathToFile(path: string) {
         pageHash = __VP_HASH_MAP__[pagePath.toLowerCase()]
       }
       if (!pageHash) return null
-      pagePath = `${base}assets/${pagePath}.${pageHash}.js`
+      pagePath = `${base}${__ASSETS_DIR__.replace(
+        /"(.+)"/,
+        '$1'
+      )}/${pagePath}.${pageHash}.js`
     } else {
       // ssr build uses much simpler name mapping
       pagePath = `./${sanitizeFileName(

src/client/shim.d.ts

@@ -3,6 +3,7 @@ declare const __VP_LOCAL_SEARCH__: boolean
 declare const __ALGOLIA__: boolean
 declare const __CARBON__: boolean
 declare const __VUE_PROD_DEVTOOLS__: boolean
+declare const __ASSETS_DIR__: string
 
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'

src/node/build/bundle.ts

@@ -94,19 +94,19 @@ export async function bundle(
         output: {
           sanitizeFileName,
           ...rollupOptions?.output,
-          assetFileNames: 'assets/[name].[hash].[ext]',
+          assetFileNames: `${config.assetsDir}/[name].[hash].[ext]`,
           ...(ssr
             ? {
                 entryFileNames: '[name].js',
                 chunkFileNames: '[name].[hash].js'
               }
             : {
-                entryFileNames: 'assets/[name].[hash].js',
+                entryFileNames: `${config.assetsDir}/[name].[hash].js`,
                 chunkFileNames(chunk) {
                   // avoid ads chunk being intercepted by adblock
                   return /(?:Carbon|BuySell)Ads/.test(chunk.name)
-                    ? 'assets/chunks/ui-custom.[hash].js'
-                    : 'assets/chunks/[name].[hash].js'
+                    ? `${config.assetsDir}/chunks/ui-custom.[hash].js`
+                    : `${config.assetsDir}/chunks/[name].[hash].js`
                 },
                 manualChunks(id, ctx) {
                   if (lazyDefaultThemeComponentsRE.test(id)) {

src/node/build/render.ts

@@ -46,7 +46,7 @@ export async function renderPage(
   // for any initial page load, we only need the lean version of the page js
   // since the static content is already on the page!
   const pageHash = pageToHashMap[pageName.toLowerCase()]
-  const pageClientJsFileName = `assets/${pageName}.${pageHash}.lean.js`
+  const pageClientJsFileName = `${config.assetsDir}/${pageName}.${pageHash}.lean.js`
 
   let pageData: PageData
   let hasCustom404 = true

src/node/config.ts

@@ -73,6 +73,9 @@ export async function resolveConfig(
     })
   const site = await resolveSiteData(root, userConfig)
   const srcDir = normalizePath(path.resolve(root, userConfig.srcDir || '.'))
+  const assetsDir = userConfig.assetsDir
+    ? userConfig.assetsDir.replace(/\//g, '')
+    : 'assets'
   const outDir = userConfig.outDir
     ? normalizePath(path.resolve(root, userConfig.outDir))
     : resolve(root, 'dist')
@@ -94,6 +97,7 @@ export async function resolveConfig(
   const config: SiteConfig = {
     root,
     srcDir,
+    assetsDir,
     site,
     themeDir,
     pages,

src/node/plugin.ts

@@ -129,7 +129,8 @@ export async function createVitePressPlugin(
           __ALGOLIA__:
             site.themeConfig?.search?.provider === 'algolia' ||
             !!site.themeConfig?.algolia, // legacy
-          __CARBON__: !!site.themeConfig?.carbonAds
+          __CARBON__: !!site.themeConfig?.carbonAds,
+          __ASSETS_DIR__: JSON.stringify(siteConfig.assetsDir)
         },
         optimizeDeps: {
           // force include vue to avoid duplicated copies when linked + optimized

src/node/serve/serve.ts

@@ -28,7 +28,8 @@ export async function serve(options: ServeOptions = {}) {
   const config = await resolveConfig(options.root, 'serve', 'production')
   const base = trimChar(options?.base ?? config?.site?.base ?? '', '/')
 
-  const notAnAsset = (pathname: string) => !pathname.includes('/assets/')
+  const notAnAsset = (pathname: string) =>
+    !pathname.includes(`/${config.assetsDir}/`)
   const notFound = fs.readFileSync(path.resolve(config.outDir, './404.html'))
   const onNoMatch: IOptions['onNoMatch'] = (req, res) => {
     res.statusCode = 404

src/node/siteConfig.ts

@@ -59,6 +59,7 @@ export interface UserConfig<ThemeConfig = any>
   srcDir?: string
   srcExclude?: string[]
   outDir?: string
+  assetsDir?: string
   cacheDir?: string
 
   shouldPreload?: (link: string, page: string) => boolean
@@ -192,6 +193,7 @@ export interface SiteConfig<ThemeConfig = any>
   configDeps: string[]
   themeDir: string
   outDir: string
+  assetsDir: string
   cacheDir: string
   tempDir: string
   pages: string[]