Vue项目的打包

时间：2023-03-10 03:07:16
Vue项目的打包

vue项目的打包

更改config文件夹下的index.js里的assetsPublicPath路径    将 “/”  改为  “./”

 build: {

    env: require('./prod.env'),

    index: path.resolve(__dirname, '../dist/index.html'),

    assetsRoot: path.resolve(__dirname, '../dist'),

    assetsSubDirectory: 'static',

    assetsPublicPath: './',

    productionSourceMap: true,

    productionGzip: false,

    productionGzipExtensions: ['js', 'css'],

    bundleAnalyzerReport: process.env.npm_config_report

  }

1:原本路径是指向根目录,什么是根目录？

根目录:在计算机的文件系统中，根目录指逻辑驱动器的最上一级目录，它是相对子目录来说的；它如同一棵大树的“根”一般，所有的树杈以它为起点，故被命名为根目录。以微软公司开发的Windows操作系统为例：打开我的计算机（计算机），双击C盘就进入C盘的根目录。双击D盘就进入D盘的根目录

  • ../ 父级目录

  • ./当前目录

2:css背景图片打包找不到的问题？

打包后，不管原先的图片资源在哪里，路径通通变成static/img/xxxx ，若在HTML里的IMG标签的src引入图片，则正常显示，因为路径是从 index.html 开始寻找的，所以static/img/xxxx是能正确访问到图片。

但是在css/app.css里，在当前的CSS目录下，无 static/img 路径，所以资源找不到。而背景图片要回退两级才能正确访问到.

index.html 
      static 
      | --img 
          | --图片.jpg
      | --css 
          | --app.css 
      | --js

| --app.js

解决方法：build->utils.js

Vue项目的打包

相关文章