vue项目打包没加载到静态资源（vue项目设置打包后的静态文件访问路径）

vue项目设置打包后的静态文件访问路径

**啰嗦一下：**相同域名下可能会存在两份相关或不相关的代码    
    
    
，需要通过切换文件夹路径进入不同项目时     


     


     


    ，需要在项目打包输出代码时设置静态文件的访问路径（vue    
    
    
    、react都要）    
    
    
    。这种方式可能不太好




 




 




 


，但是确实存在这种场景


     


     


     


。

**静态文件访问路径说明：**项目的静态文件访问路径在本地运行和服务器访问是有区别的
   

   

   

，默认状态下服务器上的项目代码     

     

     

   ，访问路径是从服务器根目录开始
 




 




 




。

**H5中的访问设置：**在H5中 




  




  




  

，静态文件访问路径的区别

1


     


     


     


、服务器根目录访问：代码中书写静态文件路径时开头不加“./    
    
    
”   

   

   

   。

2
 




 




 




、访问当前文件夹：代码中书写静态文件路径时加“./     


     


     


    ” 

     

     

     

。

vue项目的静态文件访问设置：

vue项目的最终项目文件需要经过打包输出

  


  


  


，静态文件的访问路径需要在vue.config.js文件中设置

  




  




  




。

1   

   

   

   、vue.config.js文件中     
     
     
  ，module.exports中没有配置publicPath属性时  




   




   




   
，默认静态文件通过服务器根目录访问  


  


  


  。

2 

     

     

     

、vue.config.js文件中配置publicPath属性设置静态文件访问路径  
     
     
     
。 module.exports = { publicPath: ./, devServer:{ hot: true, port: 8082, // 启动端口 open: true, // 启动后是否自动打开网页 }, }

publicPath属性值为“./




 




 




 


”时表示静态文件的引入路径为当前文件夹


 



 



 



，设置之后                ，可以将整个项目代码随便移动文件夹位置而不影响静态文件的访问


   




   




   




。

end

如果对你有帮助   




    




    




    ，记得点赞噢（~~）