3.1、vue 的 vue.config.js 中进行配置 3.2、接着在对应的 router/index.js 中 添加路由配置 3.3、yarn build 项目后,把打包后的文件,放在 nginx 路径下 html 文件夹下,新建一个文件夹 NeiMeng, 然后把包对应放进去 3.4、nginx 路径加前缀和不添加前缀配置 server { listen 8071; server_name www.lpnm.co...
一、打包并移动vue项目 运行命令:npm run build 到前端项目目录下,找到<dist>文件夹。复制<dist>下的文件,粘贴至nginx根目录下的 二、修改配置文件nginx.conf 完成上一步后,打开我们的配置文件<nginx.conf>,找到<server>节点,修改参数。 初始的配置参数是这样的—— 大概需要修改的配置如下: <listen>:代理端口(...
为了将Vue项目部署到Nginx服务器上,你需要按照以下步骤进行操作: 确认Vue项目的构建输出目录: 通常,Vue项目通过npm run build命令进行构建后,会生成一个dist目录,该目录包含了所有用于生产环境的静态文件。确保你的Vue项目已经构建完成,并且dist目录存在。 安装和配置Nginx服务器: 根据你的操作系统,安装Nginx的方式可能...
server{listen80;server_namelocalhost;(本机访问:http://localhost/,其他地方访问:http://服务器ip)# 根目录location/{# vue项目的打包后的distroot/webapp/dist;indexindex.htmlindex.htm;# history 模式下需要加上这一行try_files$uri$uri//index.html;}# 通过 location 前缀匹配 api/v1location^~/api/v...
1.首先找到自己的vue的项目然后输入命令 npm run build 接下来会生成一个dist文件夹里面就是你的vue的项目2.把 dist文件夹丢到虚拟机nginx/html目录下,html文件删除两个默认文件,把dist目录名改成你项目名字 配置文件的路径修改为你命名的文件夹 重启nginx服务 ./nginx -s reload ...
nginx部署vue项目跨域配置 一、什么是跨域 (1)跨域 由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一个与当前页面地址不同即为跨域。存在跨域的情况: 网络协议不同,如http协议访问https协议。 端口不同,如80端口访问8080端口。 域名不同,如qianduanblog.com访问baidu.com。
在nginx文件夹中打开cmd (如果是powershell不能直接使用cmd命令: 输入cmd回车即可) 基本命令操作: 查看nginx的版本号:nginx -v 启动nginx:start nginx配置文件nginx.conf修改重装载命令:nginx -s reload 3.打包vue项目 //打包vue项目使用的指令 npm run build 4.将打包...
vue-cli 执行打包命令: npm run build 如上进行打包,生成dist文件夹,把该文件夹下的文件直接复制到nginx服务器目录下,就可打开项目,但是只有首页可以看到的,刷新一下页面也是404了,原因和上面一样,因此需要在nginx服务器配置对所有的路径或者文件夹进行跳转,重定向到首页 index.html即可:这样就能找到路由了。
为了保证vue项目间的路由不发生冲突，在打包项目时，采用前缀名（如frontend）的方式区分每一个vue项目，同时将该前缀名(如frontend)用作nginx中文件夹名。其中重要的位置有：路由、index.html以及编译配置文件，具体如下(举例使用frontend作为前缀名)： 修改config文件夹下index文件中的build里的assetsPublicPath:"/...
4.部署前端项目,比如我的前端项目发布后的目录是 D:\VueSite 修改nginx.conf的location 的 root 配置,指定前端项目的目录;index 是用来指定首页的,vue编译完了首页就是index.html 这里不用改。 然后执行命令 nginx -s reload 重启nginx ,访问 http://localhost:88/ 就可以正常访问vue项目了 ...