vue-cli中设置publicPath的方式有哪些

蜗牛 互联网技术资讯 2022-07-30 26 0

这篇“vue-cli中设置publicPath的方式有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“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: &lsquo;./&rsquo; 好处是随处可打开,直接在打包文件夹就可打开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&rsquo;

    // 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-cli中设置publicPath的方式有哪些”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注蜗牛博客行业资讯频道。

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:niceseo99@gmail.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    评论