vue public目录（vue – vue中的publicPath讲解）

vue.config.js里面的publicPath是部署应用包时的基本 URL；

从 Vue CLI 3.3 起baseUrl已被publicPath替代；

如果想要了解vue的环境变量 process.env 可以阅读这篇文章： vue中的process.env.NODE_ENV讲解

1    
    
    
，publicPath

publicPath是部署应用包时的基本 URL；默认情况下


     


     


     ，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
 




 




 



，例如 https://www.my-app.com/    
    
    
。如果应用被部署在一个子路径上   

   

   

，你就需要用这个选项指定这个子路径     


     


     


。例如 

     

     

    ，如果你的应用被部署在 https://www.my-app.com/my-app/

  




  




  


，则设置 publicPath 为 /my-app/




 




 




 。

这个值也可以被设置为空字符串 (‘’) 或是相对路径 (‘./’)  


  


  


，这样所有的资源都会被链接为相对路径  
     
     
   ，这样打出来的包可以被部署在任意路径；但相对路径的 publicPath 有一些使用上的限制
   

   

   
。在以下情况下


   




   




   

，应当避免使用相对 publicPath:

当使用基于 HTML5 history.pushState 的路由时； 当使用 pages 选项构建多页面应用时     

     

     

。

2 



 



 



，哪里会用到publicPath

在vue中的项目中一般静态文件路径要使用publicPath 和项目打包部署时都会用到publicPath;

2.1 静态文件使用publicPath

如果你的项目里面的静态文件都放在public文件中

               ，那么使用的时候要使用publicPath这个变量



    




    




    
，防止打包后静态文件找不到；

你需要通过绝对路径来引用它们 




  




  




 。因为：任何放置在 public 文件夹的静态资源都会被简单的复制














，而不经过 webpack；

下图是vue-cli官网给出的使用说明：链接

注意：这里用到了process.env.BASE_URL;下面会解释的

2.2 项目打包使用publicPath

如果你想把开发服务器架设在根路径               ，你可以使用一个条件式的值：

这里判断是否是生产环境 如果是那么前面的部署路径加上 /app/；如果不是 默认使用根路径 / ;

生产环境经常配合前端服务器的中nginx代理使用； module.exports = { publicPath: process.env.NODE_ENV === production ? /app/ : / }

3



     



     



     ，publicPath和process.env.BASE_URL

1














，如果你在vue.config.js里面设置了publicPath：

module.exports = { publicPath: process.env.NODE_ENV === production ? /video/ : /, }

那么process.env.BASE_URL 其实就是 publicPath;不信你可以在组件中console.log(process.env.BASE_URL)打印出来；

BASE_URL会被vue.config.js中 publicPath变量覆盖

  


  


  
。

2    
    
    
，如果没有在vue.config.js里面设置publicPath；那么process.env.BASE_URL默认就是根路径 ：/ ;

3


     


     


     ，在vue路由的配置项中也会用到process.env.BASE_URL：

const router = new VueRouter({ mode: history, base: process.env.BASE_URL, routes, })

mode history 代表路由不再显示#
 




 




 



，会像如下形式：localhost:8080/user/list；

主要是base属性 代表着是基本的路由请求的路径：

如：base: ‘/app/’

说明项目部署在app目录下   

   

   

，那么vue所有的路由前面都会自动加上: /app