一,部署上线
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’。如果加了应该就不会页面一片空白了。

Logo

前往低代码交流专区

更多推荐