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