Vue 上线部署遇到的问题

1，解决跨域问题，设置反向代理

然后编辑配置文件，将下图选中部分删掉

反向代理就设置ok啦，然后开心的打开项目，发现跳转过页面后，浏览器不能刷新，一刷新就出现404页面。

这个解决办法就是修改配置文件可以实现

Apache配置如下：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Nginx配置如下：

location / {
  try_files $uri $uri/ /index.html;
}

将上面的配置按照服务器的环境选取放到下图位置即可：

 这样虽然可以实现浏览器刷新不跳404了。

但是这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*',name:'NotFoundComponent',component: NotFoundComponent }
  ]
})

如果上图配置完后出现了 Uncaught Error: Invalid path "*"  

就把 " * " 改成 " /:pathMatch(.*) " 

实列代码如下：

{ path: '/:pathMatch(.*)', name:'NotFoundComponent',component: NotFoundComponent }