vue 部署

Young5566發表於2018-12-27
Vue

build專案

域名是根目錄

如果你的專案部署在域名的根目錄如https://www.baidu.com/，則不需要進行配置,直接執行npm run build 即可。

域名後面有路徑

如果是 https://www.baidu.com/XXX， 即域名後面有路徑的，則需要進行如下配置： 首先修改router中的index.html,

export default new Router({
  mode: "history", // 用於消除vue路徑中的 “#/”
  base:"/XXX/",	// 修改此處，修改為域名後面的路徑
  routes: []
})
複製程式碼

然後修改config資料夾中的index.js，

build: {
	#######
	
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/XXX/',	// 修改此處，修改為 /XXX/, XXX為你域名後的路徑
    
    ########
  }
複製程式碼

修改完成後，即可執行 npm run build ,產生一個dist資料夾。

配置 nginx

此處用nginx作為伺服器，安裝nginx請看本人另一篇部落格Ubuntu 16.04安裝Nginx。

上傳檔案

將dist 重新命名為 XXX(域名後路徑名字)，然後上傳到/var/www/html目錄下。

配置nginx檔案

可以配置/etc/nginx/conf.d中的***.conf(自己建的配置檔案，方便管理),或者配置 /etc/nginx/sites-available中的default， 內容如下：

location /XXX {	   #此處為域名後面的路徑，需要與打包時的 XXX 一樣
                root /var/www/html; 	# 檔案根目錄
                index index.html;		# 需要填加索引，否則報403錯誤，暫時不											知到為什麼。
                try_files $uri $uri/ /XXX/index.html;	# 如果在router中的index.js配置 {mode: "history"}， 則必須配置這項，否則會報404錯誤。最好配置這項。有關try_files請看https://www.aliyun.com/jiaocheng/204756.html。
        }
複製程式碼

用sudo nginx -t 檢視nginx配置是否正確
用sudo nginx -s reload 使nginx重新載入配置檔案

新手上車，請多指教，如有問題，請郵件聯絡：young5678@qq.com

相關文章