vue2创建webpack项目build之后无法正常显示页面的问题

最近在做vue项目的时候,项目正常运行,但是当我打包上线之后,却出现无法出现页面空白的情况,打开控制台,发现无法加载到css和js文件.

仔细观察发现路径中少了一个dis文件夹,于是我加上dist文件夹单独访问css文件

http://localhost:4396/dist/static/css/app.5f6e046c01a10a67012602ec1dfe38ac.css

发现还是无法访问到,后来想到由于我用的是websotrm编译器,自带的本地服务端口是localhost:4396,这是我自己设置的,后面需要加上项目名称,于是加上我的项目名,

http://localhost:4396/vue-news/dist/static/css/app.5f6e046c01a10a67012602ec1dfe38ac.css,

发现这次可以访问了,但是得修改index.html文件,这不是最好的解决办法.

于是百度得到修改config/index.js里面的配置.

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

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

    /**
     * Source Maps
     */

    productionSourceMap: true,

　　找到这一段代码,将assetsPublicPath改为'./',原本是'/';

重新运行npm run build,这时候打开就能加载出来文件了.

but,页面还是一片空白,再次打开控制台,文件都引入成功了,但是为什么还是没有显示页面呢,我找到element选项里,发现页面只有一个

<div id='app'></div>

他没有任何子元素,我觉得应该是js里面的问题,但是不知道从何处找,无奈只能又百度,终于让我找到答案了,

附上原文链接:http://blog.csdn.net/xjlinme/article/details/74783887;

原来是路由的事,我在路由里面设置了mode为history,这时候需要将每个路由加上项目名称,如果不加的话就得将mode改成hash模式.

至此页面就能正常打开了.