• 一:部署在tomcat上
    1.打开vue项目的config/index.js。找到assetsPublicPath标签,修改成’./’,原本是’/’,当前js中有两个assetsPublicPath标签,都要修改!

    在这里插入图片描述
    2.修改当前js文件的productionSourceMap标签,改为false;
    在这里插入图片描述
    3.找到router/index.js文件,添加base: ‘/test/’, // 指定项目放在服务器上的项目名,这样一句话
    在这里插入图片描述
    4.在tomcat中的webapps中新建文件夹,然后将刚刚dist下的内容拷贝进去,
    在这里插入图片描述
    5.启动tomcat成功后访问http://localhost:8080/vuetest/,成功访问

  • 二.使用nginx部署vue项目
    1.下载好nginx对应的windows版本的压缩包,解压即可
    在这里插入图片描述
    2.这就是nginx的文件夹,打开conf/nginx.conf文件,修改里面的内容,将原有的server部分注释掉,写入下面的内容

server {
        listen       8888;//端口
        server_name  localhost;//地址,放在服务器上写服务器IP
		
		 #charset koi8-r;
		 root       D:/softwore-dep/nginx-1.8.1/html/dist; #vue项目的打包后的dist

       
       location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
        #因此需要rewrite到index.html中,然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
    }

3.双击运行nginx.exe文件,可以在任务管理器中查看是否已运行,同时也可以使用命令行查看是否启动,在cmd命令下,进入nginx的解压目录下输入: tasklist /fi “imagename eq nginx.exe”
在这里插入图片描述
在这里插入图片描述
如何有这两个项目的运行,就说明nginx启动成功了!
然后浏览器输入http://localhost:8888/#/就可以项目了

  • 三.在linux上部署vue项目
    首先需要在linux上安装,参考在linux上安装配置nginx
    跟随这个地方一步一步的走就可以安装配置好nginx,
    同样的这里的nginx.conf文件中也有配置
    在这里插入图片描述
    在root中配置好项目地址,端口,域名,然后访问地址就可以了
    http://域名:端口/,就可以了访问你的vue项目了
Logo

前往低代码交流专区

更多推荐