feat(cli-service): add assetsDir option to specify assets root directory (#1322)

close #1311

Author: jkzing

packages/@vue/cli-service/lib/config/base.js

@@ -1,6 +1,7 @@
 module.exports = (api, options) => {
   api.chainWebpack(webpackConfig => {
     const resolveLocal = require('../util/resolveLocal')
+    const getAssetPath = require('../util/getAssetPath')
     const inlineLimit = 10000
 
     webpackConfig
@@ -65,7 +66,7 @@ module.exports = (api, options) => {
           .loader('url-loader')
           .options({
             limit: inlineLimit,
-            name: `img/[name].[hash:8].[ext]`
+            name: getAssetPath(options, `img/[name].[hash:8].[ext]`)
           })
 
     // do not base64-inline SVGs.
@@ -76,7 +77,7 @@ module.exports = (api, options) => {
         .use('file-loader')
           .loader('file-loader')
           .options({
-            name: `img/[name].[hash:8].[ext]`
+            name: getAssetPath(options, `img/[name].[hash:8].[ext]`)
           })
 
     webpackConfig.module
@@ -86,7 +87,7 @@ module.exports = (api, options) => {
           .loader('url-loader')
           .options({
             limit: inlineLimit,
-            name: `media/[name].[hash:8].[ext]`
+            name: getAssetPath(options, `media/[name].[hash:8].[ext]`)
           })
 
     webpackConfig.module
@@ -96,7 +97,7 @@ module.exports = (api, options) => {
           .loader('url-loader')
           .options({
             limit: inlineLimit,
-            name: `fonts/[name].[hash:8].[ext]`
+            name: getAssetPath(options, `fonts/[name].[hash:8].[ext]`)
           })
 
     // Other common pre-processors ---------------------------------------------

packages/@vue/cli-service/lib/config/css.js

@@ -11,6 +11,8 @@ const findExisting = (context, files) => {
 
 module.exports = (api, options) => {
   api.chainWebpack(webpackConfig => {
+    const getAssetPath = require('../util/getAssetPath')
+
     const {
       extract = true,
       sourceMap = false,
@@ -22,8 +24,8 @@ module.exports = (api, options) => {
     const isProd = process.env.NODE_ENV === 'production'
     const shouldExtract = isProd && extract !== false && !shadowMode
     const extractOptions = Object.assign({
-      filename: `css/[name].[contenthash:8].css`,
-      chunkFilename: 'css/[name].[id].[contenthash:8].css'
+      filename: getAssetPath(options, `css/[name].[contenthash:8].css`),
+      chunkFilename: getAssetPath(options, 'css/[name].[id].[contenthash:8].css')
     }, extract && typeof extract === 'object' ? extract : {})
 
     // check if the project has a valid postcss config

packages/@vue/cli-service/lib/config/prod.js

@@ -1,12 +1,14 @@
 module.exports = (api, options) => {
   api.chainWebpack(webpackConfig => {
     if (process.env.NODE_ENV === 'production') {
+      const getAssetPath = require('../util/getAssetPath')
+
       webpackConfig
         .mode('production')
         .devtool('source-map')
         .output
-          .filename(`js/[name].[chunkhash:8].js`)
-          .chunkFilename(`js/[name].[chunkhash:8].js`)
+          .filename(getAssetPath(options, `js/[name].[chunkhash:8].js`))
+          .chunkFilename(getAssetPath(options, `js/[name].[chunkhash:8].js`))
 
       // keep module.id stable when vendor modules does not change
       webpackConfig

packages/@vue/cli-service/lib/options.js

@@ -3,6 +3,7 @@ const { createSchema, validate } = require('@vue/cli-shared-utils')
 const schema = createSchema(joi => joi.object({
   baseUrl: joi.string(),
   outputDir: joi.string(),
+  assetsDir: joi.string(),
   compiler: joi.boolean(),
   transpileDependencies: joi.array(),
   productionSourceMap: joi.boolean(),
@@ -47,6 +48,9 @@ exports.defaults = () => ({
   // where to output built files
   outputDir: 'dist',
 
+  // where to put static assets (js/css/img/font/...)
+  assetsDir: '',
+
   // boolean, use full build?
   compiler: false,
 

packages/@vue/cli-service/lib/util/getAssetPath.js

@@ -0,0 +1,7 @@
+const path = require('path')
+
+module.exports = function getAssetPath (options, filePath) {
+  return options.assetsDir
+    ? path.posix.join(options.assetsDir, filePath)
+    : filePath
+}