项目打包
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