vue打包之部署在非根路徑下的三兩事

首先，感嘆一下，2019年已經過去一半，想想自己做了些什么，好像也沒做什么。

今天試着配一個nginx，以前的nginx都是指向的/根路徑，今天的nginx指向的非/根路徑，遇到許多問題的，總結總結。

老規矩，先來點示例代碼：

nginx：

server {
        listen       80;
        server_name domain.com;
        location /path {
            alias "/your-project-file";
            index index.html;
            try_files $uri $uri/ /path/index.html;
        }
}

location /path ：表示項目訪問地址為http://domain.com/path
alias /your-project-file ：指向你的項目打包后放在服務器的位置

try_files /path/index.html ：這里為router官方文檔推薦的寫法，需要把/path加上

然后就是vue代碼，這里用到的是vue-cli3x的代碼，上關鍵的：

首先是vue.config.js下的publicPath: process.env.NODE_ENV === 'production' ? '/path': '/'，為什么需要這樣配？具體參見cli文檔

然后是路由需要配置base: process.env.NODE_ENV === 'production' ? '/path': '/'，這個也需要看router文檔

通過這兩個地方的配置，訪問http://domain.com/path就可以訪問到你打包后的項目了，但是！！！！

項目中的圖片我是放在public文件夾下的，打包后沒有正確的將public文件夾給加上/path，導致所有圖片都404，很煩

這時網上出現了兩個聲音，第一，將圖片放到src文件夾里面的assets。我試過，沒搞出來，放棄了。第二，在圖片前加上publicPath，參見文檔。

是的，包括所有以靜態資源方式引入到項目的框架/插件，都需要拼上<%= BASE_URL %>，處理完之后，再次打包，解決了。

啊，時間好快，文章好水...