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; 
  } 
}