欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue项目的部署

程序员文章站 2022-07-15 11:35:17
...
  • 一:部署在tomcat上
    1.打开vue项目的config/index.js。找到assetsPublicPath标签,修改成’./’,原本是’/’,当前js中有两个assetsPublicPath标签,都要修改!

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

  • 二.使用nginx部署vue项目
    1.下载好nginx对应的windows版本的压缩包,解压即可
    Vue项目的部署
    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”
Vue项目的部署
Vue项目的部署
如何有这两个项目的运行,就说明nginx启动成功了!
然后浏览器输入http://localhost:8888/#/就可以项目了

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