vue-cli中设置publicPath的几种方式对比

更新时间：2022年07月29日 17:08:04 作者：whylost迷心

这篇文章主要介绍了vue-cli中设置publicPath的几种方式对比，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

设置publicPath的几种方式对比

publicPath打包设置

1. 不设置(默认为 publicPath: ‘/’) 或者设置 publicPath: '/'

// vue.config.js
module.exports = {
  publicPath: '/',
}

html中被打包的css和js路径如下

<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <link rel=icon href=/favicon.ico>
    <title>vue-manage-system-template-js</title>
    <link href=/js/about.62bc742c.js rel=prefetch>
    <link href=/css/app.1d486654.css rel=preload as=style>
    <link href=/css/chunk-vendors.2ac5db4b.css rel=preload as=style>
    <link href=/js/app.a62b0400.js rel=preload as=script>
    <link href=/js/chunk-vendors.7a1d5ffa.js rel=preload as=script>
    <link href=/css/chunk-vendors.2ac5db4b.css rel=stylesheet>
    <link href=/css/app.1d486654.css rel=stylesheet>
</head>
<body>
<noscript><strong>We're sorry but vue-manage-system-template-js doesn't work properly without JavaScript enabled. Please
    enable it to continue.</strong></noscript>
<div id=app></div>
<script src=/js/chunk-vendors.7a1d5ffa.js></script>
<script src=/js/app.a62b0400.js></script>
</body>
</html>

2.设置 publicPath: ‘./’ 好处是随处可打开,直接在打包文件夹就可打开html页面

// vue.config.js
module.exports = {
  publicPath: './',
}

html中被打包的css和js路径如下

<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <link rel=icon href=favicon.ico>
    <title>vue-manage-system-template-js</title>
    <link href=js/about.62bc742c.js rel=prefetch>
    <link href=css/app.1d486654.css rel=preload as=style>
    <link href=css/chunk-vendors.2ac5db4b.css rel=preload as=style>
    <link href=js/app.a62b0400.js rel=preload as=script>
    <link href=js/chunk-vendors.7a1d5ffa.js rel=preload as=script>
    <link href=css/chunk-vendors.2ac5db4b.css rel=stylesheet>
    <link href=css/app.1d486654.css rel=stylesheet>
</head>
<body>
<noscript><strong>We're sorry but vue-manage-system-template-js doesn't work properly without JavaScript enabled. Please
    enable it to continue.</strong></noscript>
<div id=app></div>
<script src=js/chunk-vendors.7a1d5ffa.js></script>
<script src=js/app.a62b0400.js></script>
</body>
</html>

3.设置 publicPath: 'vmst’

// vue.config.js
module.exports = {
  publicPath: 'vmst',
}

html中被打包的css和js路径如下

<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <link rel=icon href=vmst/favicon.ico>
    <title>vue-manage-system-template-js</title>
    <link href=vmst/js/about.62bc742c.js rel=prefetch>
    <link href=vmst/css/app.1d486654.css rel=preload as=style>
    <link href=vmst/css/chunk-vendors.2ac5db4b.css rel=preload as=style>
    <link href=vmst/js/app.a62b0400.js rel=preload as=script>
    <link href=vmst/js/chunk-vendors.7a1d5ffa.js rel=preload as=script>
    <link href=vmst/css/chunk-vendors.2ac5db4b.css rel=stylesheet>
    <link href=vmst/css/app.1d486654.css rel=stylesheet>
</head>
<body>
<noscript><strong>We're sorry but vue-manage-system-template-js doesn't work properly without JavaScript enabled. Please
    enable it to continue.</strong></noscript>
<div id=app></div>
<script src=vmst/js/chunk-vendors.7a1d5ffa.js></script>
<script src=vmst/js/app.a62b0400.js></script>
</body>
</html>

vue.config.js publicPath "./" npm run build无效

outputDir
assetsDir
indexPath

必须填

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  outputDir: "dist",
  assetsDir:"static",
  indexPath:'index.html',
  devServer: {
    overlay: {
      warnings: false,
      errors: false
    },
    // 设置主机地址
    host: 'localhost',
    // 设置默认端口
    port: 8080,
    // 设置代理
    proxy: {
      '/api': {
        // 目标 API 地址
        target: 'http://192.168.124.231:8707/', // 接口的域名
        // 如果要代理 websockets
        ws: false,
        // 将主机标头的原点更改为目标URL
        changeOrigin: true
      }
    }
  }
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详解vue-validator（vue验证器）
本篇文章主要介绍了vue-validator（vue验证器）,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-01-01
vue.js循环radio的实例
今天小编就为大家分享一篇vue.js循环radio的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
Axios代理配置及封装响应拦截处理方式
这篇文章主要介绍了Axios代理配置及封装响应拦截处理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue点击按钮动态创建与删除组件功能
这篇文章主要介绍了vue点击按钮动态创建与删除组件功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-12-12
Vue实现简单的拖拽效果
这篇文章主要为大家详细介绍了Vue实现简单的拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
vue中setup语法糖写法实例
如果你在 vue3 开发中使用了语法的话,对于组件的name属性,需要做一番额外的处理,下面这篇文章主要给大家介绍了关于Vue3 setup语法糖的相关资料,需要的朋友可以参考下
2022-12-12
Vue3造轮子之打包构建配置二级目录方式
这篇文章主要介绍了Vue3造轮子之打包构建配置二级目录方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
vue修饰符v-model及.sync原理及区别详解
这篇文章主要为大家介绍了vue修饰符v-model及.sync原理及使用区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
vue实现瀑布流组件滑动加载更多
这篇文章主要为大家详细介绍了vue实现瀑布流组件滑动加载更多，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
SpringBoot+Vue项目线上买菜系统源码展示
本线上买菜系统采用的数据库是Mysql，使用springboot框架开发。在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点,需要的朋友可以参考下
2022-08-08