Vue+webpack项目打包

项目打包

npm run build
会在项目根目录下生成dist文件夹，包含static目录和index.html文件，可以直接将这两个文件扔到服务端，或者将dist文件扔到服务端

打包之后的问题

1、出现空白页问题

主要原因是路径问题：
更改config下的index.js中build模块导出的路径。因为index.html与static在同一级目录下面，所以改为 "./ "
另外还需要注意，src里面router/index.js路由设置里面默认值是hash，如果改成history的话也会是一片空白。所以改为hash或者直接把模式配置删除，如果非要用history的话，需要在服务端加一个覆盖所有的情况的候选资源：如果URL匹配不到任何静态资源，则应该返回一个index.html，这个页面就是app依赖页面。

2、出现资源引用路径问题

情况一.如果是将static与index.html直接放在服务器根目录,也就是说，当前的应用访问的网址如:http://www.xxx.com
解决办法：
配置输出的publiPath:"/“或者”./"
情况二.直接将打包后的dist文件放在了服务器的根目录，也就是如果需要访问当前的应用，访问的网址如:http://www.xxx.com/dist
解决办法：

  首先需要在创建路由实例中增加：
    const router = new VueRouter({
        mode: 'history',
        base: '/mobile/',
        scorllBehavior: () => ({

        y: 0

        }),
        routes
    });
        然后再打包发布目录:
        publiPath:"/dist/"或者"http://www.xxx.com/dist/"

3、背景图片加载不出来

（1）打开webpack.prod.conf.js，在output中添加 publicPath: './'，如下图所示：（2）修改打包后背景图片的引用路径
资源内的图片是通过css加载的，CSS代码如：background：url（…/ assets / img-bg / buttonbg.png）no-repeat;

但是打包过后的CSS变成了背景：url（…/…/ static / img / buttonbg.68979b3.png）no-repeat;我们需要修改配置文件，是的CSS代码打包后，资源引用路径还是相对路径;

解决办法：

1.打开build文件夹下的utils.js ;

2.在下图位置添加 publicPath: '…/…/ '

打包后再次打包后修改的样式无效，在浏览器中找不到该css属性。

解决办法：
首先注释掉webpack.prod.config.js中，下面的代码

这个插件的作用是为了消除来自不同组件之间可能重复的css的。
然后再utils.js中添加，minimize: true