outputDir 和 assetsDir 的配置不能有关联否则会出问题

[menkeydyvh]

Version

3.0.5

Node and OS info

Windows 10 node v8.9.3

Steps to reproduce

outputDir 和 assetsDir 同时配置 后
npm run build 的时候会打包的文件不是只指向outputDir 的目录 而是 outputDir + assetsDir 的目录
而这样已关联assetsDir配置会找不到文件

------------------------------- 具体事例 ------------------------------------------------------------------

配置如下：
｛
outputDir: path.resolve(__dirname, '..', 'app/public/build'),
assetsDir: 'public/build',
indexPath: path.resolve(__dirname, '..', 'app/view/index.html'),
｝
我的项目是eggjs项目
项目默认的静态文件位置位于app/public
项目读取index.html的目录是 app/view

于是我outputDir配置到 app/public/build下
assetsDir由于项目原因必须 public 开头 所以配置为 public/build

build结果：生成css、js、img的目录变成了 app/public/public/build/(css、js、img)
然而 index.html 里面针对打包后的 css、js、img 都是 /public/build/(css、js、img)

<script src=/public/build/js/app.23e82727.js></script>

What is expected?

outputDir 和 assetsDir 本来就应该独立配置
不应该有 outputDir + assetsDir 的相关输出配置

What is actually happening?

outputDir 和 assetsDir 同时配置 后
npm run build 的时候会打包的文件不是只指向outputDir 的目录 而是 outputDir + assetsDir 的目录

[haoqunjiang]

文档里说得很清楚啊，assetsDir 就是相对路径 https://cli.vuejs.org/zh/config/#assetsdir

indexPath 可以是相对路径也可以是绝对路径并且不会干扰到其他设置，所以这样就可以放心地把 index.html 移动到其他目录了。outputDir + assetsDir 就是为了输出静态资源用的。
这样配置起来有什么问题吗？

[menkeydyvh]

文档里说得很清楚啊，assetsDir就是相对路径https://cli.vuejs.org/zh/config/#assetsdir

indexPath可以是相对路径也可以是绝对路径并且不会干扰到其他设置，所以这样就可以放心地把index.html移动到其他目录了.outputDir + assetsDir就是为了输出静态资源用的。
这样配置起来有什么问题吗？

assetsDir 有一个功能是告诉index.html 你打包后的(css、js、img)存放在哪里
如果你说打包后的(css、js、img)文件输出是 outputDir + assetsDir
那assetsDir的作用是什么？

我认为打包后输出静态文件的目录是outputDir
assetsDir 是告诉index.html 你打包完的那些文件是放在那里

注意看一下我事例最后index.html 输出的打包后的<scripts src=assetsDir+/js/app.23e82727.js文件 前面是不是取的是assetsDir这个值

[menkeydyvh]

@sodatea 你的文档可能没理解对这个assetsDir的作用 看上面引用回复

[haoqunjiang]

我是从实现层面理解的。

outputDir 就是 webpack 中的 output.path，assetsDir 是用来生成各种 filename 时用到的 subpath，所以最后反映出来的输出目录就是它们拼接到一起。
一个更常见的使用场景是用户的静态文件放在一个 /static/ 目录下面，这种时候就需要配置 assetsDir 并且需要相对 outputDir 了。

我还是不理解你这个 Bug Report 指的具体 bug 是什么？我们的文档和行为有什么不一致的地方吗？

[menkeydyvh]

@sodatea 那请问一下 index.html 里面自动填写的打包后的结果<scripts src=assetsDir+/js/app.23e82727.js
为什么src的值上会加上assetsDir？
如果打包结果 = outputDir + assetsDir
那 index.html中 这个src 的结果是什么才能匹配得上

而且我的这个例子在我还没用cli3得时候就可以达到得效果 现在反而不行了是为什么？是一种进步的实现还是考虑的不够详细？

[menkeydyvh]

@sodatea
按这个配置：
｛
outputDir: path.resolve(__dirname, '..', 'app/public/build'),
assetsDir: 'public/build',
indexPath: path.resolve(__dirname, '..', 'app/view/index.html'),
｝
打包输出位置是 app/public/build/public/build
index.html的位置是 app/view/index.html
index.html 的 scripts src=app/public/build
我读取静态资源的目录是 app/public/

如果你说这样配置
｛
outputDir: path.resolve(__dirname, '..', 'app), //打包时会先执行这个目录的清空
assetsDir: 'public/build',
indexPath: path.resolve(__dirname, '..', 'app/view/index.html'),
｝

这个outputDir是不是清空了app目录下的文件 这样会导致我服务端的文件被清空
而这个清空为什么不是 outputDir + assetsDir的位置被清空

要解决这个
方法1 打包前的清空 是 outputDir + assetsDir
方法2 outputDir 和 assetsDir 分开独立配置 不要有 outputDir + assetsDir 这层关系 这样会让配置变得更灵活

[haoqunjiang]

有一个暂时的 workaround 是打包时加上 --no-clean 参数，需要清空时手动操作。
具体的设计上的改动我再想想。

[menkeydyvh]

@sodatea 3Q

[yyx990803]

assetsDir 如果值是相对路径，自然是相对于 outputDir 的。你想要设绝对路径就给 assetsDir 也用 path.resolve() 给一个绝对路径就行了...

[yyx990803]

assetsDir 的本意不是用来解决你这个问题的，只是单纯的让资源多嵌套几层。对应的路径肯定要保持一致。

这里的问题根源是 egg.js 对于 app/public/ 下的文件不是 serve 在 / 而是 /public/... 解决方法是

• 配置 egg-static 让它把文件 serve 在 /.
• 或者：配置 baseUrl 为 /public.

[menkeydyvh]

@yyx990803 但是还没到cli 3的时候这两个配置一直都是分开的 如果并在一起反而不够便利 如果能灵活处理为啥一定要绑死？