Vue ：npm run build打包全家桶

版权声明：转载请标明出处。 https://blog.csdn.net/qq_42172829/article/details/84655704

enmmm~~第一个自己写的Vue项目快要上线了，踩坑太多。有点真实！

直接开始：

第一步：在build之前需要配置一下，进入Vue项目中的Config下的index.js文件打开。找到build代码块，找到assetsPublicPath，在未修改前assetsPublicPath："/"，需要把它修改为：assetsPublicPath："./"。即可。（第一步解决了打包后访问路径的问题）

build: {
  	env: require('./prod.env'),
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './', //重点，考试必考。

    /**
     * Source Maps
     */

    productionSourceMap: true,
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // 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
  }

第二步：第二步主要是注意图片等文件的引用问题。

1.如果引用的图片直接使用的<img src="............"/> 写死了，那么就不需要修改成 2

2.如果图片引入是变量，data={img:"..........."}如果是这样的则需要修改引入方式：data={img:require(..........)}

总结一下：只要是使用的本地图片资源则按上述2钟实现。如果是https的线上图片路径直接引入即可。

第三步：命令行：npm run build

打包完成后进入项目会发现一个dist文件夹，文件夹下就是index.html，到这里打包完成！

第四步：这个为注意事项，主要规范代码，不然打包后会给你带来灾难，别问我为什么。（都懂！！！）

在开发模式中，一定一定要规范你代码，决不能出现命名重名的问题。特别是CSS样式。scoped一定要加上，还有标签只要是给过样式的必须给选择器，不要用类似: img{} 这样的。

原因：你打包后它会将你的css js 集成起来在你的页面中引用，当你出现多个img标签时，并且没有scoped。最后会发生什么事情。