vue打包运行并解决404问题

vue使用npm run build 就能打包，生成一个dist文件，直接打开index.html是不行的，我们需要将其放到一个容器中

1.安装express-generator生成器。

npm install express-generator -g 

2.找个地方创建一个express项目。

express name        // name是项目名

3.进入项目目录，安装相关项目依赖。

cd name

npm install 

4.将打包生成的dist文件夹下的所有文件复制到express项目文件夹下面，然后运行  npm start 来启动express项目。

5.在浏览器输入localhost:3000（3000是自己设置的端口号）就行了。

这时是可以看到页面，但是我们刷新页面可能出现404，我的是nginx配置问题，解决方法如下

如果不是这个问题可以参考另外的几篇文章

Vue项目上线后刷新报错404问题（apache，nginx，tomcat 

Vue build打包之后，刷新页面出现404解决方案

解决：设置history模式并配置nginx

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
mode: 'history',
routes: [...]
})

这种模式还需要后台支持，因为我们的因该是个单页客户端应用，如果后台没有正确配置，当用户浏览时就会返回404，配置nginx

server { 
  listen   80; 
  server_name localhost; 
  index index.html; 
  root /root/dist; 
  location / { 
    root /root/dist; 
    try_files $uri $uri/ /index.html =404; 
  } 
}