zoukankan      html  css  js  c++  java
  • webpack打包assetsPublicPath配置

    build: {
        // Template for index.html
        index: path.resolve(__dirname, '../dist/index.html'),
    
        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        // css中源代码: background-image: url(../assets/bgd.png);
      
        //assetsPublicPath: '/',     index.html:  src=/static/js/manifest.2ae2e69a05c33dfc65f8.js         css:  background-image:url(/static/img/bgd.934f452.png);
        //assetsPublicPath: './',     index.html:  src=./static/js/app.ee5d22bbbfaa3cfe658f.js             css:  background-image:url(static/img/bgd.934f452.png)
        //assetsPublicPath: '/dist',   index.html:  src=/dist/static/js/manifest.7dee6341ec362d8a22ac.js    css:  background-image:url(/diststatic/img/bgd.934f452.png)
        //assetsPublicPath: '/dist/',    index.html:  src=/dist/static/js/app.ee5d22bbbfaa3cfe658f.js>        css:  background-image:url(/dist/static/img/bgd.934f452.png)
        proxyTable: {
          '/EzaYun': {
              target:'http://192.168.3.18:8080/Services',            //请求的目标地址的BaseURL
              ws:true,
              changeOrigin:true,                            //是否开启跨域
              pathRewrite:{
              '^/EzaYun':''                                    //重新路径,把EzaYun开头的,替换成 ''
            }
          }
        },
        
        /**
         * Source Maps
         */
    
        productionSourceMap: true,
        // https://webpack.js.org/configuration/devtool/#production
        devtool: '#source-map',
    
        // Gzip off by default as many popular static hosts such as
        // Surge or Netlify already gzip all static assets for you.
        // Before setting to `true`, make sure to:
        // npm install --save-dev compression-webpack-plugin
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],
    
        // Run the build command with an extra argument to
        // View the bundle analyzer report after build finishes:
        // `npm run build --report`
        // Set to `true` or `false` to always turn it on or off
        bundleAnalyzerReport: process.env.npm_config_report
      }

    npm run build打包后,打包出来的文件结构如下,整个dist文件夹放到jboss的welcome-content目录下,访问首页地址 http://192.168.3.11:8080/dist/#/

    当 assetsPublicPath: '/'   
    index.html 请求加载js文件就少了一级dist目录 http://192.168.3.11:8080/static/js/app.ee5d22bbbfaa3cfe658f.js
    期望正常的路径是:               http://192.168.3.11:8080/dist/static/js/app.ee5d22bbbfaa3cfe658f.js


    改成assetsPublicPath:./加载 index.html加载js文件正常,但是css加载背景图片多了 /static/css 目录
               http://192.168.3.11:8080/dist/static/css/static/img/bgd.934f452.png
    期望正常的路径是:  http://192.168.3.11:8080/dist/static/img/bgd.934f452.png

    先记录下这个问题,后续还是得在webpack配置上多学习。
  • 相关阅读:
    ASP.NET中在一般处理程序中使用session的简单介绍
    oracle 11gR2安装图文教程
    ORACEL 创建表空间
    Echarts使用心得总结(二)
    SqlServer 2008无法远程连接到服务器
    浅谈HTTP中Get与Post的区别
    java设计模式-观察者模式学习
    读牛人博客有感
    mysql的with rollup
    java中的枚举enum
  • 原文地址:https://www.cnblogs.com/yongwangzhiqian/p/12365157.html
Copyright © 2011-2022 走看看