diff --git a/packages/@vue/cli-service/__tests__/buildLib.spec.js b/packages/@vue/cli-service/__tests__/buildLib.spec.js
index efb1e8a405..1acc6940cf 100644
--- a/packages/@vue/cli-service/__tests__/buildLib.spec.js
+++ b/packages/@vue/cli-service/__tests__/buildLib.spec.js
@@ -132,3 +132,45 @@ test('build as lib with webpackConfiguration depending on target (js)', async ()
const commonContent = await project.read('dist/testLib.common.js')
expect(commonContent).not.toContain(`foo: 'bar'`)
})
+
+test('build as lib with --filename option', async () => {
+ const project = await create('build-lib-filename-option', defaultPreset)
+ await project.write('src/main.js', `
+ export default { foo: 1 }
+ export const bar = 2
+ `)
+ const { stdout } = await project.run('vue-cli-service build --target lib --name testLib --filename test-lib src/main.js')
+ expect(stdout).toMatch('Build complete.')
+
+ expect(project.has('dist/demo.html')).toBe(true)
+ expect(project.has('dist/test-lib.common.js')).toBe(true)
+ expect(project.has('dist/test-lib.umd.js')).toBe(true)
+ expect(project.has('dist/test-lib.umd.min.js')).toBe(true)
+
+ const port = await portfinder.getPortPromise()
+ server = createServer({ root: path.join(project.dir, 'dist') })
+
+ await new Promise((resolve, reject) => {
+ server.listen(port, err => {
+ if (err) return reject(err)
+ resolve()
+ })
+ })
+
+ const launched = await launchPuppeteer(`http://localhost:${port}/demo.html`)
+ browser = launched.browser
+ page = launched.page
+
+ expect(await page.evaluate(() => {
+ return window.document.title
+ })).toBe('testLib demo')
+
+ // should expose a module with default and named exports
+ expect(await page.evaluate(() => {
+ return window.testLib.default.foo
+ })).toBe(1)
+
+ expect(await page.evaluate(() => {
+ return window.testLib.bar
+ })).toBe(2)
+})
diff --git a/packages/@vue/cli-service/lib/commands/build/demo-lib-js.html b/packages/@vue/cli-service/lib/commands/build/demo-lib-js.html
index af52086787..74ce7b4844 100644
--- a/packages/@vue/cli-service/lib/commands/build/demo-lib-js.html
+++ b/packages/@vue/cli-service/lib/commands/build/demo-lib-js.html
@@ -1,8 +1,8 @@
<%- htmlWebpackPlugin.options.libName %> demo
-
+
<% if (htmlWebpackPlugin.options.cssExtract) { %>
-
+
<% } %>
-
+
<% if (htmlWebpackPlugin.options.cssExtract) { %>
-
+
<% } %>
diff --git a/packages/@vue/cli-service/lib/commands/build/index.js b/packages/@vue/cli-service/lib/commands/build/index.js
index 50698a98da..aa6e3fb0ac 100644
--- a/packages/@vue/cli-service/lib/commands/build/index.js
+++ b/packages/@vue/cli-service/lib/commands/build/index.js
@@ -31,6 +31,7 @@ module.exports = (api, options) => {
'--target': `app | lib | wc | wc-async (default: ${defaults.target})`,
'--formats': `list of output formats for library builds (default: ${defaults.formats})`,
'--name': `name for lib or web-component mode (default: "name" in package.json or entry filename)`,
+ '--filename': `file name for output, only usable for 'lib' target (default: value of --name)`,
'--no-clean': `do not remove the dist directory before building the project`,
'--report': `generate report.html to help analyze bundle content`,
'--report-json': 'generate report.json to help analyze bundle content',
diff --git a/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js b/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js
index 56b6bca016..00324bf276 100644
--- a/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js
+++ b/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js
@@ -1,7 +1,7 @@
const fs = require('fs')
const path = require('path')
-module.exports = (api, { entry, name, formats }, options) => {
+module.exports = (api, { entry, name, formats, filename }, options) => {
const { log, error } = require('@vue/cli-shared-utils')
const abort = msg => {
log()
@@ -24,7 +24,7 @@ module.exports = (api, { entry, name, formats }, options) => {
api.service.pkg.name ||
path.basename(entry).replace(/\.(jsx?|vue)$/, '')
)
-
+ filename = filename || libName
function genConfig (format, postfix = format, genHTML) {
const config = api.resolveChainableWebpackConfig()
@@ -33,7 +33,7 @@ module.exports = (api, { entry, name, formats }, options) => {
config
.plugin('extract-css')
.tap(args => {
- args[0].filename = `${libName}.css`
+ args[0].filename = `${filename}.css`
return args
})
}
@@ -64,12 +64,13 @@ module.exports = (api, { entry, name, formats }, options) => {
inject: false,
filename: 'demo.html',
libName,
+ assetsFileName: filename,
cssExtract: config.plugins.has('extract-css')
}])
}
// resolve entry/output
- const entryName = `${libName}.${postfix}`
+ const entryName = `${filename}.${postfix}`
config.resolve
.alias
.set('~entry', fullEntryPath)