nginx中部署vue打包後的靜態文件

時間 2019-11-12

標籤 nginx 部署 vue 打包靜態文件欄目 Nginx 简体版

原文原文鏈接

如何在nginx中部署靜態資源就不描述了, 請看個人這篇博客 javascript

將vue腳手架項目打包後的靜態文件放到nginx上, 發現有個問題, 即url上有#, 怎麼去掉這個#呢.html

1 項目中router的mode

路由的mode要爲history, 以下List-1.1所示vue

List-1.1java

export default new Router({
  mode: 'history',
  routes: [
    {
...

2 nginx的conf配置

以下List-2.1所示, root放在server下,而不是 location裏面; location裏面固定寫"try_files $uri $uri/ /index.html;"nginx

爲何這麼寫? 請看vue-router官網的說明, 以下圖2.1, 看這個連接; 另外將root放到server下, 參考的是這篇文章.vue-router

List-2.1bash

server {
    #端口
    listen       3009;
    server_name  localhost;
    #這裏root的值是放置靜態資源的那個目錄
    root /usr/share/nginx/army/html;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        #下面的這行固定, 就這麼寫 
        try_files $uri $uri/ /index.html;
    }
...

vue-router官網上有nginx的配置說明, 以下圖2.1ide