<%= BASE_URL %>详解

作者: 扶得一人醉如苏沐晨 | 来源:发表于2023-01-08 09:38 被阅读0次

    <%=%>是ejs模板语法,ejs模板语法是为了能够在html文件中使用js变量
    Vue CLI 3.3 之前的版本,BASE_URL 对应的是 vue.config.js中的 baseURl 字段,vue CLI 3.3 之后(包括3.3)的版本,对应的是publicPath

    publicPath 中的这个 / 代表的是打包之后静态资源的路径,也就是说代表的是打包后 dist文件夹的路径 image.png
    有时候后端配置资源的默认访问路径的时候,可能会与前端打包时配置的默认根路径有所差异
    比如:后端要访问静态资源的根路径为/static,
    而一般情况下,我们项目的vue.config.js中对BAES_URL的配置是/,或者不做配置,因为它默认的值也是/
    这个路径决定了我们的前端项目打包后获取静态资源的默认的根路径(不显示在代码中),
    同时,这个路径也在public/index.html中有明显的引用,大多时候都会看到如下的代码:
    
    image.png

    如何修改BASE_URL
    所以,显而易见,如果想修改 BASE_URL,
    Vue CLI 3.3 之前的版本,配置:baseURl: '/static'
    Vue CLI 3.3 之后(包括3.3)的版本,配置:publicPath: '/static'

    生产环境和开发环境如何区分配置
    很简单,只需要判断一下当前环境是生产环境还是开发环境,再应用不同的路径就可以了

    module.exports = {
      publicPath: process.env.NODE_ENV === 'production'
        ? '/static/'
        : '/'
    }
    
    

    相关文章

      网友评论

        本文标题:<%= BASE_URL %>详解

        本文链接:https://www.haomeiwen.com/subject/pibscdtx.html