Vue CLI 设置 publicPath:打包后的应用可部署在任意路径

前言

领导要重新部署多个应用环境,且不受路径层级影响。
于是找到了 Vue CLI 配置 publicpath

配置说明

下图所示:

  1. '/' :默认值,应用部署在根路径上;
  2. './':注意前面加了一个点,应用可部署在任意路径上。因为 . 点代表相对路径
  3. '':空字符串,同 2 是一个意思,代表相对路径。接着往下看就知道为啥可为空字符串
    Vue CLI 设置 publicPath:打包后的应用可部署在任意路径_第1张图片

打包

图左侧:相对路径,可部署在任意路径下。不带前缀,这就是为啥设置为空同样可行;
图右侧:绝对路径,只能在路径下,否则找不到相关文件;
Vue CLI 设置 publicPath:打包后的应用可部署在任意路径_第2张图片

总结

请仔细查看上图,一切尽在图中!强烈建议自己动手实践,会有更深刻的认知~

扩展

1. router 限制

Vue CLI 配置 publicpath下还有一段黄色标注。

  1. Vue Router mode,为 history 无效,建议使用默认值 hash
  2. 多应用暂没使用,此处不赘述;
    Vue CLI 设置 publicPath:打包后的应用可部署在任意路径_第3张图片

2. 与配置 outputDir 关联关系

注意还有一个配置 outputDir,不要弄混淆了!!
outputDir 的默认值是 dist 。打包生成的文件放在 Vue工程 根目录下,文件夹名称就是 dist
Vue CLI 设置 publicPath:打包后的应用可部署在任意路径_第4张图片

配置一

  • 默认值,无需配置;
  • 应用必须部署在根路径下;
  • 打包后的文件在 Vue工程 根目录文件夹 dist 下;
module.exports = {
    publicPath: '/', // 注意这里没有点 .
    outputDir: 'dist' // 注意结尾无 /
}

配置二

module.exports = {
    publicPath: './', // 注意这里多个点 .
    outputDir: 'dist/route/test' // 注意结尾无 /
}
  • publicPath 值开头是 ./ ,说明可部署任意路径下;
  • publicPath 值结尾是 / ,表示某路径下outputDir 值结尾没有 / ,说明是文件夹名称
  • 打包后的文件在Vue 工程dist/route/test下;
    Vue CLI 设置 publicPath:打包后的应用可部署在任意路径_第5张图片
    dist 文件夹下的文件放入部署环境,打开是 route/test/index.html
    Vue CLI 设置 publicPath:打包后的应用可部署在任意路径_第6张图片
  • 将部署路径 route/ 改为 route2/同样能访问,只要 publicPath任意路径就行;
  • /route/test/ 下的文件放在其它路径下,url 路径名称对应也可访问;
  • outputDir 仅仅是打包后的文件存放路径,与部署路径无关
    Vue CLI 设置 publicPath:打包后的应用可部署在任意路径_第7张图片

配置三

module.exports = {
    publicPath: '/route/test/', // 注意这里没有点 .
    outputDir: 'dist/route/test' // 注意结尾无 /
}
  • publicPath 值开头是 / ,这就限制了部署路径,必须在部署环境的根路径 /route/test 文件夹下;
  • publicPath 值结尾是 / ,表示某路径下outputDir 值结尾没有 / ,说明是文件夹名称
  • 打包后的文件在Vue 工程dist/route/test下;
    Vue CLI 设置 publicPath:打包后的应用可部署在任意路径_第8张图片
    部署环境下打开是 route/test/index.html
    Vue CLI 设置 publicPath:打包后的应用可部署在任意路径_第9张图片
  • 将部署路径 route/ 改为 route2/只能访问 index.html,相关文件就报 404
  • 例如 test.js ,它被限制在部署环境根路径 /route/test/ 下,/route2/test/ 就找不到;
  • outputDir 仅仅是打包后的文件存放路径,与部署路径无关

Vue CLI 设置 publicPath:打包后的应用可部署在任意路径_第10张图片

配置四

module.exports = {
    publicPath: './route/test/', // 注意这里多个点 .
    outputDir: 'dist/route/test' // 注意结尾无 /
}
  • publicPath 值开头是 ./ ,说明可部署任意路径下的 /route/test/ 下;

  • publicPath 值结尾是 / ,表示某路径下outputDir 值结尾没有 / ,说明是文件夹名称

  • 打包后的文件在Vue 工程dist/route/test下;
    Vue CLI 设置 publicPath:打包后的应用可部署在任意路径_第11张图片

  • 部署环境下打开是 route/test/index.html

  • 但只能访问 index.html,相关文件就报 404,;

  • 例如 test.js ,套了两层 route/test/,第一层 route/test/是部署路径,第二次是配置的 publicPath 路径;

  • 正确配置参考二和三,但建议使用配置三(有限制),推荐配置二;

  • outputDir 仅仅是打包后的文件存放路径,与部署路径无关
    Vue CLI 设置 publicPath:打包后的应用可部署在任意路径_第12张图片

3. index.html 引入静态文件

讲到这里,我们已经深刻的理解,想要应用部署在任意路径下,开头必须是 ./空字符串。同理,index.html 文件中引入的静态文件路径是:

// 正确
<script src="./tree.js"></script>

// 正确
<script src="tree.js"></script>

// 正确,参考https://cli.vuejs.org/zh/guide/html-and-static-assets.html#public-%E6%96%87%E4%BB%B6%E5%A4%B9
<script src="<%= BASE_URL %>tree.js"></script>

// 应用部署在非根路径下,错误,已限制在根路径下
<script src="/tree.js"></script>

报错,当前应用在 dist 文件夹下找不到。tree.js限制在根路径。
Vue CLI 设置 publicPath:打包后的应用可部署在任意路径_第13张图片

4. img 标签的图片引用

这里仅说明放在 public 文件夹下的图片在 img 标签中的使用。多说一句, 打包后的public 文件夹文件仅仅是拷贝到默认 dist 目录下。与打包后 src/assets 文件夹下的图片被编译是不同的。
同理,

// 正确
<img class="user-icon" src="./static/images/login.png" />

// 正确
<img class="user-icon" src="static/images/login.png" />

// 错误:应用部署在非根路径下是找不到的,已限制在根路径下
<img class="user-icon" src="/static/images/login.png" />

5. background-image url 图片引用

同样,这里仅说明放在 public 文件夹下的图片在 background-image url 中的使用。
我们是可以使用 src/assets 文件夹下的图片,但有时就是有用 public 文件夹下图片的场景。便于运维同事,现场更换图片…

方式一

最简单的方式,除了路径有点长…应用部署在任意路径下也可行,亲测有效,哈哈哈…

// 正确:你没看错...就是这么长
background-image: url('../../../public/static/images/login.png');

以下都是错的

// 错误:在 src/static/images 路径下找图片。被webpack解析为 require(src/static/images/login.png) 动态引入
background-image: url('~@/static/images/login.png');

// 错误:在 src/static/images 路径下找图片
background-image: url('/static/images/login.png');

// 错误:相对路径,在当前 .vue 文件所在路径下找图片,例如文件在 src/views 下。则在 src/views/static/images 下找图片
background-image: url('./static/images/login.png');

// 错误:同上
background-image: url('static/images/login.png');

最后,本小节的知识点较多,需要多多消化~可查看 Vue CLI 处理静态资源 去理解。
关于 何时使用 public 文件夹,Vue CLI 也给出了解释。下面是截图,以免你不想进入第三方链接:
Vue CLI 设置 publicPath:打包后的应用可部署在任意路径_第14张图片

方式二

网上也找到比较复杂的用 CSS 变量 方式,这里不赘述,可 参考;

你可能感兴趣的:(Vue2.x,进阶知识点,vue.js,javascript,前端)