提示

说明：解决方案可能有多种，希望下面的能对你有所帮助

Vue项目发布

1 Vue项目部署到nginx后，访问出现Nginx404

原因：

当你在浏览器地址栏输入一个地址（http://xx.AA/note/git）的时候，或者在vue项目页面进行一些页面跳转后（地址栏已经发生变化），再点击页面刷新时，浏览器会把它当前一个后端路由来处理，而你部署到了静态资源服务器，实际访问的是文件，而且路径为：http://xx.AA/note/git，但对于项目来说，这个文件一定不存在，所有会404（该情况一般出现在history模式）

解决办法：修改nginx配置 或者将vue路由模式改为hash模式

 server
  {
  ......
	
    location / {
       #以下配置解决页面刷新后 空白的问题
       try_files $uri $uri/ /index.html;
    }
}

提示：修改完配置后，记得重启nginx服务

2 npm 指定端口

通过npm启动前端项目时，常常会自定义端口，一般有两种方式，

• 配置文件中指定
• 通过命令行指定

这里介绍的是命令行指定，这种方式常用于本地调试，因为它很方便。

npm run dev -- --port 8090

该命令的作用为，在运行 npm run dev 时，向启动脚本传递额外的参数（这里是 --port 8090），从而指定开发服务器监听的端口号为 8090。

下面是它的进一步解释：

npm run dev -- [你的自定义参数]

• npm run dev：执行你在 package.json 中定义的 dev 脚本。
• --：这是关键部分。它告诉 npm 后面的内容是要传递给脚本的参数，而不是 npm 自己的参数。
• --port 8090：你希望传入的参数，用于指定开发服务器使用哪个端口。