Vue项目的部署
程序员文章站
2022-07-15 11:35:17
...
-
一:部署在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项目了
上一篇: erlang mnesia的dirty_write详细分析
下一篇: 修复GRUB2