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配置上多学习。
  • 相关阅读:
    MySQL事物原理及事务隔离级别
    sql中in和exists的原理及使用场景。
    PHP实现多继承
    磁盘inode节点被占满的解决方法
    使用uwsgi和gunicorn部署Django项目
    python自学经验,每天进步一点点
    msyql 5.7安装遇到的坑
    shell 三剑客
    nginx 配置
    websphere 新建profile
  • 原文地址:https://www.cnblogs.com/yongwangzhiqian/p/12365157.html
Copyright © 2011-2022 走看看