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 资源根路径 项目打包后存放的路径 即项目目录下的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

你可能感兴趣的:(vue,css)