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

如果对你有帮助   




    




    




    



，记得点赞噢（~~）