vue項目路由模式為history時打包后部署在nginx 配置訪問

 

　　注意，我這里的vue 腳手架 版本是 vue-cli3沒有config文件解決方案，在項目根目錄上 自己創建 vue.config.js文件  

　　另外 我這里是不使用 webpack打包部署

　　webpack 打包部署配置 鏈接：https://www.cnblogs.com/nongzihong/p/11913216.html

• 重點這是把 vue 項目 打包后  dist 文件夾 的資源文件，放在服務器根目錄 配置方式  
• 放在nginx服務器根目錄下的情況：

 

 

 

vue.config.js配置：

publicPath: '/'

 

 

router配置：

base: '/',
mode: 'history'

 

nginx配置文件：

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

 

 

我這里是以子目錄 為例

• 放在nginx服務器根目錄下一個子目錄下的情況（以子目錄名稱是demo為例）：

 

 

 

 

 

 

vue.config.js配置：

publicPath: '/demo/'

 

router配置：

base: '/demo/',
mode: 'history'

 

nginx配置文件：

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