vuecli项目打包之后 js/css/img 文件路径不正确问题

974 阅读1分钟

当web服务器的根目录不止一个网页的时候,我们通常都希望不同的网页通过相对路径在各自的文件夹里面找寻自己需要的文件,但是如果vue-cli打包没有配置,刚好服务器的目录是多层的时候,通过网页引入的 js/css/img 等资源还是会从根目录获取。

问题类型:js,css静态资源文件路径不正确

解决方法: 修改config/index.js

    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './', //修改 '/' 为 './'

1. vue-cli 2.x版本

 在config文件夹下的index.js中修改 assetsPublicPath: './'

2. vue-cli 3.x版本

在 cli3 中 assetsPublicPath 属性被 baseUrl 取代,只需要在vue.config.js 添加baseUrl 属性 设为 ‘./’ 即可

3. vue-cli 4.x版本

与cli3相同都是修改 vue.config.js 文件 ,但将属性换为   publicPath:'./' 

问题类型:img等静态资源文件路径不正常

解决方法:通过require引入

    <img :src="require(`@/assets/${item}.jpg`)"></img>

配置之后所有静态资源都会根据相对路径进行引入了