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