vue 打包部署在 nginx服务中,以及出现的一些问题 | 您所在的位置:网站首页 › vue打开项目链接都回到了首页问题 › vue 打包部署在 nginx服务中,以及出现的一些问题 |
首先来说操作步骤 前提: 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: './',即可
方案: a、vue 上配置所有请求地址前加一个前缀 '/rng' (以下为vue解决跨域配置,开发时的配置) 代码段: module.exports = { dev: { // Paths assetsSubDirectory: '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: '../../' |
CopyRight 2018-2019 实验室设备网 版权所有 |