首先来说操作步骤

前提：

1、你已经安装/下载好 nginx

2、你的vue 项目已经打包完成，并得到了 dist 文件夹

部署开始：

1、vue 项目打包，在控制台输入 npm run build 等待打包结束后可在项目的同级目录下得到打包文件夹 dist ，中包含了我们要部署的 index.html 文件

2、将下载好的 nginx 压缩包 解压后，在文件夹地址栏输入 cmd 后回车 后可以直接打开文件路径，

3、在窗口命令行中输入 nginx 启动指令： start nginx 然后浏览器打开 127.0.0.1:8080 即可检查nginx 有没有启动成功

浏览器显示 Welcome to nginx! 表示启动成功

4、在nginx 中配置vue 访问

4-1、将上面打包好的dist 文件夹复制到nginx 目录下的 html 文件夹中

4-2、然后打开 nginx 目录下的 conf 文件夹下的 nginx.conf 文件（记事本打开）

4-3、添加如下配置

# 前端页面地址
location /rw {alias   html/dist; #静态资源访问地址，使用alias 配置index index.html index.htm;
}

5、打开浏览器输入127.0.0.1:8080/rw 即可查看是否加载成功，

==============================华丽分割线================================

常见问题

1、vue 打包部署后浏览器显示 js 、css 等静态资源找不到问题

方案：

在 vue 项目中，打开config 文件夹下的 index.js 配置，找到 assetsPublicPath 设置为assetsPublicPath: './'，即可

2、部署后访问后台显示是以nginx的地址作为访问域名的问题，即访问域名错误问题

方案：

a、vue 上配置所有请求地址前加一个前缀 '/rng' （以下为vue解决跨域配置，开发时的配置）

代码段：

module.exports = {dev: {// PathsassetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {'/rng': {target:'http://127.0.0.1:9090', // 你请求的第三方接口changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题pathRewrite:{  // 路径重写，'^/rng': ''  // 替换target中的请求地址，也就是说以后你在请求http://127.0.0.1:9090/这个地址的时候直接写成/api即可。}}},
},

请求地址则修改为（重点！重点！重点！）：请求前加配置前缀

b、nginx 上配置如下，解析后台的前缀，并转发到后台服务地址上

代码段：

# 后台请求转译
location /rng/ {rewrite ^/rng/(.*) /$1 break; proxy_pass http://127.0.0.1:9090; #后台服务地址
}

3、在部署好后打开页面显示一片空白，脑瓜子嗡嗡的，html页面加载空白问题

方案：vue 中若配置了去除#号的配置，则删除路由配置中index.js 的 mode: 'history',//去掉#号 设置，（原来配置mode: 'hash', 也可以）

4、项目中引入了element ui 插件，所以可能会出现，字体文件找不到，造成有些样式显示错误，即element 的静态资源引入错误

错误提示：

方案：

a、检查build文件夹下的 webpack.base.conf.js 有没有把 woff 之类的文件加入到fonts文件夹下，如果没有则添加上（正常都有）

代码段：

{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: utils.assetsPath('fonts/[name].[hash:7].[ext]')}
},

b、在build文件夹下的 utils.js 中添加如下配置，即 publicPath: '../../'

vue 打包部署在 nginx服务中，以及出现的一些问题相关推荐

解决Vue打包部署到Nginx时，css样式不生效问题
今天在将使用Vue-cli编写的前端项目部署到Nginx的时候发生了一件很困扰的问题: Vue-cli项目在本地使用 npm run dev的时候,页面样式是可以正常加载出来的,但是我将Vue-cl ...
vue 不生效打包样式_Vue打包部署到Nginx时,css样式不生效的解决方式
今天在将使用Vue-cli编写的前端项目部署到Nginx的时候发生了一件很困扰的问题: Vue-cli项目在本地使用 npm run dev的时候,页面样式是可以正常加载出来的,但是我将Vue-cl ...
vue打包放到java中启动_Springboot+Vue打包部署总结
文章目录一.Vue打包+部署 1. 打包(npm run build:prod) 2.nginx部署前端vue项目二.Springboot打包+部署 1.打包(mvn clean package) ...
linux 退出服务器_Vue实战091：Vue项目部署到nginx服务器
项目开发完成之后我们就需要将项目上线运行供用户访问,这时候我们就需要将项目部署到服务器上.对于Vue这种前端Web项目我们一般都部署在linux系统上,Linux常见的Web应用服务器有Apache. ...
vue项目部署到nginx
vue项目部署到nginx 一.vue项目打包修改config/index.js的assetsPublicPath为 ./(注意一定是build里面的,下面dev中也有这个配置) 这个路径的配置很重 ...
将Vue项目部署在Nginx,解决前端路由、反向代理和静态资源问题
将Vue项目部署在Nginx,解决前端路由.反向代理和静态资源问题需求: 一台服务器,Linux 安装了Nginx 使用Vue脚手架编写的Vue项目第一步:将Vue项目打包,然后将生成的dist文 ...
Vue打包部署到Tomcat
Vue打包部署到Tomcat 一,在config-->index.js中,设置build更改 assetsPublicPath: '/'为assetsPublicPath: './' modu ...
SpringBoot打包部署成Windows服务的详细步骤
SpringBoot打包部署成Windows服务的详细步骤 1.SpringBoot 1.1 pom.xml 1.2 项目代码 1.2.1 项目结构 1.2.2 Controller的代码 1.2.3 ...
vue 打包路由报错_急急急急，vue打包部署后，路由无法跳转
求助 vue打包部署后首页可以正常访问,可是一但点击下一步:就没反应:控制台报错: (打包后的index.html文件和JS文件分别部署在服务器的不同文件夹下,但是在index.html文件中的lin ...

vue 打包部署在 nginx服务中，以及出现的一些问题

常见问题

vue 打包部署在 nginx服务中，以及出现的一些问题相关推荐

最新文章

热门文章