publicPath
- Type:
string - Default:
'/'部署应用包时的基本 URL，通常表示域名的根路径上，如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在https://www.my-app.com/my-app/，则设置publicPath为/my-app/
outputDir
-
Type:
string -
Default:
'dist'当运行
vue-cli-service build时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入--no-clean可关闭该行为)。
assetsDir
-
Type:
string -
Default:
''放置生成的静态资源 (js、css、img、fonts) 的 (相对于
outputDir的) 目录。
webpack如何处理静态资源
静态资源可以通过两种方式被处理
- 在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用（必须以
.开头）。这类引用会被 webpack 处理。 - 放置在
public目录下或通过绝对路径被引用（以/开头）。这类资源将会直接被拷贝，而不会经过 webpack 的处理。
1）相对路径引用
在js，css，*.vue中相对引用的静态资源，会被包含进入webpack的依赖图中，在其编译过程中，所有诸如 <img src="...">、background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。例如 url(./image.png) 会被翻译为 require('./image.png')，通过file-loader来决定最终的文件路径。
2）绝对路径引用
例如 /images/foo.png，他将会保留不变。
3）url以~开头，其后的任何内容作为一个模块请求被解析。你甚至可以应用Node模块中的资源
<img src="~some-npm-package/foo.png">
4）public 文件夹
任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。但是推荐奖资源作为模块依赖导入，public 目录提供的是一个应急手段。
