用vue cli3創建的vue項目部署到nginx之初體驗

問題:

1. vue cli3將配置文件隱藏, 該怎么修改配置?　-->　新建vue.config.js, 在其中修改.   -->見后文
2. vue-router使用history模式, nginx怎么配置, 前端項目怎么配置?   --> 見后文

 

先上我的項目目錄, 紅框是此次要涉及到的部分:

 

 

 

如果vue-router使用history模式,  配置路由:

export default new Router({
  base:'/statistic/', //base地址, 默認為/, 可修改.
  mode:'history',  //使用history模式,  意味着服務器要配置
  routes, 
})

base地址修改后,本地運行, npm run serve, 可以看到提示在如圖鏈接打開.  (等后面部署到服務器上了, 也就是通過這樣的url訪問.)

 

 

 配置vue.config.js:

module.exports = {
  publicPath:'/statistic/', //主要是配置這個. 配置項目的公共路徑. 后面將打包后的文件放在服務器的該文件夾下.
}

 

項目開發完后, 需要打包:  npm run build, 生成打包后的文件夾dist. 需要放到nginx服務器上的,就是這個文件夾里面的東西. 我的dist目錄:

             

 

 配置nginx:

打開nginx.conf,  修改配置:

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

上傳文件到服務器:

上傳到指定的根目錄,  例如如下我的nginx中, 配置了 root  /sites  ,  還有上述配置了publicPath:'/statistic/'

那么就將打包后的dist內的文件放到  /sites/statistic/下..     可以在線訪問了.   試試: http://106.54.63.129/statistic/

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /sites;
        charset utf-8;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

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

如下是服務器目錄結構

 

 

 

try_files語法, 可參看https://www.cnblogs.com/bigberg/p/7644192.html

 

源碼: https://github.com/SaigeZS/ourshow