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