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

如果对你有帮助   




    




    




    




   ，记得点赞噢（~~）