vue-cli 2.x版本中conf/index中assetsRoot、assetsSubDirectory、assetsPublicPath路径的含义
vue-cli 2.x版本中conf/index中assetsRoot、assetsSubDirectory、assetsPublicPath路径的含义assetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: '/',assetsRoot资源根路径 项目打包后存放的路径
vue-cli 2.x版本中conf/index中assetsRoot、assetsSubDirectory、assetsPublicPath路径的含义
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
- assetsRoot 资源根路径 项目打包后存放的路径 即项目目录下的dist文件
- assetsSubDirectory 资源子目录 存放静态资源文件的static,css、js、img
- assetsPublicPath 资源公共路径 ,我们访问静态资源需要额外的前缀
例如 : - assetsPublicPath:’./’
在代码中我们引用资源路径
<img src="../../img/1.jpg">
打包之后的文件路径为 :static/img/1.jpg
另外vue/cli使用的是publicPath配置的资源前缀的
PS. vue-cli2.x的与vue/cli3.x的版本打包有所不同的
在vue-cli2.x中我们在css中引如图片路径打包的时候css中引入的资源是static/img (不知道有没有人碰到过),这肯定是不对的,.css文件时在dist/static/css文件夹下的,css肯定访问不到那样的资源,因为请求的路径是’xxxx/static/css/static/img/xxxx’,除非是打包的时候是assetsPublicPath:’/‘且是放在网站的根路径下的(我nginx配置再加上’…/…/‘去解决的,至少css文件的资源拼接对了,而其他的文件也确实是在根路径下的所有…/…/依旧是根)
vue/cli3.x 打包就没有怎么多问题,只要是css引入资源直接统统’…/img/’,当然也可以配置,需要自己去研究了
有些人是用的其他方法解决的 ,虽然我没有用成功,但还是记录下
webpack.base.conf.js
{
test:/\.css$/,
use: [
{
loader:MiniCssExtractPlugin.loader,
options:{
publicPath: '../'
}
},
"css-loader"
]
},
assetsRoot:打包后存放的位置
assetsSubDirectory:静态文件路径会拼接上 assetsPublicPath+assetsSubDirectory
assetsPublicPath:‘test’ ---- 访问路径后添加/test
更多推荐
所有评论(0)