网站链接: element-ui dtcms
当前位置: 首页 > 技术博文  > 技术博文

vue部署

2021/4/20 20:52:06 人评论

vue部署 1、配置vue目录 在vue项目config/index.js文件中 找到 build部分的assetsPublicPath 修改值为"./" build: {// Template for index.htmlindex: path.resolve(__dirname, ../dist/index.html),// PathsassetsRoot: path.resolve(__dirname, ../dist),asse…

vue部署

1、配置vue目录

在vue项目config/index.js文件中 找到

build部分的assetsPublicPath 修改值为"./"

build: {
        // Template for index.html
        index: path.resolve(__dirname, '../dist/index.html'),

        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: './',

        /**
         * Source Maps
         */

2、打包

vue项目开发完以后,部署之前需要 先打包

npm  run build  

会在vue根目录下生成一个 dist目录

这个就是要部署的部分

- dist
-- static
-- index.html

二、准备nginx

1、上传到服务器

  • 借助于sftp上传文件工具进行上传

例如 FileZilla WinScp

  • 使用scp命令 来进行上传

命令行要先进入到vue项目 然后执行如下命令 上传dist目录

scp -r dist  root@192.168.12.214:/home/jiyun/dist

2、nginx的静态资源

在nginx/conf.d/ 目录下 默认有一个default.conf

我们赋值该文件

cp default.conf  demo.conf
这样子 我们就复制了一个 demo.conf文件

修改该文件

listen  端口 修改为8080    80已经被default服务占用
location / {
  root /home/jiyun/demo;      vue项目文件根路径
}

3、重启nginx服务

systemctl stop nginx

systemctl  start nginx

4、浏览器访问

http://192.168.12.214:8080/#/home

遇到的情况

1.阿里云服务器需要添加端口号
2.防火墙
# 设置开机自启
systemctl enable firewalld.service
 #检查防火墙状态是否打开
firewall-cmd --state
# 查看开启的所有的端口的方法:
firewall-cmd --list-all
# 开端口命令:
firewall-cmd --zone=public --add-port=(要开启的端口号码)/tcp --permanent
# 重启防火墙:
systemctl restart firewalld.service 

相关资讯

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?