使用webpack打包，vue-cli4配置config.js中assetsDir的妙用

我们看vue-cli4的文档，有两个publicPath 和 assetsDir两个配置路径的选项。
这两个结合起来，可以解决我们一些问题。

需求一、打包后部署在服务器，不是根目录，而是服务器下面的某个地址目录。

譬如，我们的域名是www.abc.com， 我们需要把我们的前端页面部署在www.abc.com/demo/目录下。
解决办法：

在config.js中设置：

module.export= {
	publicPath: '/demo/'
}

这个时候，我们就可以把打包后的dist目录的文件全部拷贝到服务器的/demo目录下了，正常访问。

需求二、我需要/demo目录下放打包后的html文件，其他css、js什么的，放到/static目录下

module.export= {
	publicPath: '/demo/',
	assetsDir:process.env.NODE_ENV === 'production'? '../static' : ''
}

那么，这个时候，我们的css等静态资源访问的路径就变成了

http://www.abc.com/demo/…/static/js/demo.4512554552.js 了

这个时候，我们在服务器的目录结构如下：

├─static
 ├─css
 ├─img
 └─js
|─demo
 ├─index.html

我们发现，打包的css、js跑到外面去了。

这个时候，访问页面路径 也是ok的。

单页面应用这么做的很少，但是，如果是多页面，如果有这种需求的话，就可以采用这种办法。