vue项目部署上线的基本过程

一，部署上线
1，vue-router有两种模式，即散模式和历史模式。
散模式：它使用URL的哈希来模拟一个完整的URL，这样的页面不会被重新加载的URL发生变化时。
历史模式：它利用history.pushStateAPI实现URL导航而无需重新加载页面。
散模式放到线上环境刷新页面后不会出现404或者页面一片空白的现象，但就是在url地址中会出现一个#字符在里面。历史模式则相反，至于别的暂时还不知道。
这里我用的是历史模式。

1，在vue-router实例中加上 mode: 'history',base: '/xx/xxx'

 export default new Router({
  mode: 'history',
  base: '/dist',//这里添加根目录下的路径，如何直接是根目录的话就是'/'
  routes: [....]
})

2，修改项目文件中的config>index.js
dev：{
 host:'0.0.0.0',		// 将 host:'localhost' 改成 host:'0.0.0.0',
 port: 8080
}

build:{
assetsPublicPath: './'		//将assetsPublicPath: '/'  改成  assetsPublicPath: './'
}

2，打包项目

npm run build

接下来就可以直接放到线上。还得提醒一下看看服务器有没有开启vue项目需要的端口，阿里云服务器默认是不开启的。

二，在nginx环境下vue项目出现404问题的解决方法以及页面空白问题解决方法

1，刷新页面出现404问题
在 https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations 有讲到如何配置。
nginx正确的配置如下：

注意：配置中也有两种不同情况，即直接把index.html放在根目录中和指定文件中。

第一种情况：放在根目录中的配置
location / {
    root    html;
    index   index.html index.htm;
     try_files $uri $uri /index.html;
}

第二种请况：放在指定的文件中
location /dist {
     root   html;
     index  index.html;
     try_files $uri $uri /dist/index.html;
 }

2，页面刷新出来一片空白，应该是vue-router实例中没有加上自己的项目目录。
其实就是上面部署上线中的步骤，在vue-router实例中加上base: ‘/xx/xxx’。如果加了应该就不会页面一片空白了。