vue项目打包部署到服务器的方法示例

2024-03-01 18:01:56

上上一篇我写过一些关于vue项目部署到linux服务器的文章，但是那是以node作为开发环境 pm2 守护进程的方式，让他能正常运行，可是还是出现了问题，因为属于与APP交互的页面，在webView中打开过慢，APP的用户体验非常的差，所以我查找了资料，改变了部署方式，接下来我介绍一下

这一次，我想Tomcat为例

我们先看一下Linux中 Tomcat下面的目录结构：

以vue-cli 搭建出来的手脚架 webpack的模板下的/config/index.js，这里可以看到assetsPublicPath这个键,而且还有两次，中间我自己挖过的坑我就不说了，这里要说的是，刚才两个键的后面都进行一次修改，都加一个 './'

为什么要改这里呢，是因为路径问题，如果不修改，部署到Tomcat上会出现空白页

接下来我来贴出我修改后的config/index.js的配置

'use strict'
// Template version: 1.1.3
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
 build: {
  env: require('./prod.env'),
  index: path.resolve(__dirname, '../dist/index.html'),
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './',
  productionSourceMap: true,
  // Gzip off by default as many popular static hosts such as
  // Surge or Netlify already gzip all static assets for you.
  // Before setting to `true`, make sure to:
  // npm install --save-dev compression-webpack-plugin
  productionGzip: false,
  productionGzipExtensions: ['js', 'css'],
  // Run the build command with an extra argument to
  // View the bundle analyzer report after build finishes:
  // `npm run build --report`
  // Set to `true` or `false` to always turn it on or off
  bundleAnalyzerReport: process.env.npm_config_report
 },
 dev: {
  env: require('./dev.env'),
  port: process.env.PORT || 4000,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {},
  // CSS Sourcemaps off by default because relative paths are "buggy"
  // with this option, according to the CSS-Loader README
  // (https://github.com/webpack/css-loader#sourcemaps)
  // In our experience, they generally work as expected,
  // just be aware of this issue when enabling this option.
  cssSourceMap: false
 }
}

是不是修改的都是 assetsPublicPath这个键的值 "/" ,改成"./"

这里我还想提一下我中间遇到的坑:

在开发模式的时候我们会在这里配置proxyTable: {}, 配置他的原因是为了开发的时候解决前后端分离跨域问题的

这里一般我们会这么去写

dev: {
 env: require('./dev.env'),
 port: 4000,
 autoOpenBrowser: true,
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {
  '/api': {
   changeOrigin: true,
   target: 'http://192.168.0.116:8080',
   pathRewrite: {
    '^/api': ''
   }
  }
 },

记住，这么写是为了开发模式的时候方便前后分离开发，但是我们在打包的时候一定要去掉这一部分了，因为在同一环境同端口下是不存在跨域问题的了

而我这里打包的时候就把这一部分给去掉了

变成proxyTable: {}

与此同时，我们在开发模式的时候写axios时会在接口前面加一个"/api" 我们在打包之前同样要去掉，变成后端给的那种接口，这样在部署到服务器的时候，接口路径才能正确

接下来我们还需要修改一个地方 vue-router

vue单页面应用绝大部分都用到了这个vue-router，所以我们这里也需要做一部分修改就需要给 src/router/index.js添点东西，如下面：

export default new Router({
 mode : 'history',
 base: '/dist/', //添加的地方
 routes: [
  {
   path: '/',
   name: 'index',
   component: index
  }
 ]
})

然后我们再执行npm run build ，就能发现我们打包出来的一个文件dist 而这个打包好的文件在这个项目的根目录下，我们把他放到Tomcat的目录下的WebApps中，就跨域访问到你的页面了

http://59.111.111.11:4000/dist/

备注：记得开通服务器上的端口号，要不然也是访问失败。

需要注意的是：图片资源命名的时候不要有中文，因为中文的话服务器访问可能图片显示不出来。

如果遇到Vue 项目部署到服务器的问题，请点击此文章https://www.jb51.net/article/129750.htm，或许能找到解决方法

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案

遇到的问题使用webpack打包vue后,将打包好的文件,发布到Tomcat上,访问成功,但是刷新后页面报404错. 在网上查找了一下,原来是HTML5 History 模式引发的问题,具体为什么,vue官方已经给出了解释,你可以看https://router.vuejs.org/zh-cn/essentials/history-mode.html 但是看完问题又来了,官方给出的解决方案中没有说tomcat下,怎么决解. 解决方案根据官方给出的解决方案原理你要在服务端增加一个覆盖所有情况的
设置好的iis服务器怎么打开网页(图文详解)

让自己电脑上的网页在局域网中可以访问到,就需要我们使用IIS服务器,将网页添加到服务器上的网站,那么设置好IIS服务器之后怎样在浏览器中进行访问呢?下面我们小编告诉你! 设置好iis服务器怎么打开网页首先我们打开IIS服务器,将服务器的下拉菜单打开,然后打开网站的下拉菜单,找到我们新建的网站. 然后我们在新建的网站位置右击鼠标,选择"切换到功能视图"选项. 这样我们就进入到了IIS服务器的功能视图页面中,可以看到左侧是我们网站所在文件夹的内容,右侧是可以使用的功能,我们选择"
Vue项目webpack打包部署到服务器的实例详解

Vue项目webpack打包部署到服务器这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例. 必须要配置的就是/config/index.js 在vue-cli webpack的模板下的/config/index.js,我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'
win2003架设证书服务器及让IIS6启用HTTPS服务

现在到处是劫持网址加广告的,这样通过https访问,就不用担心了,比较适合对安全级别要求高的网站,当然老站更需要开启https了. 无废话图文教程,教你一步一步搭建CA服务器,以及让IIS启用HTTPS服务. 一.架设证书服务器(CA服务) 1.在系统控制面板中,找到"添加/删除程序",点击左侧的"添加/删除windows组件",在列表中找到"证书服务",安装之. 2.CA类型,这里有四种选择,这里以"独立根CA"为介绍. 3
Windows Server 2016 服务器配置指南之IIS10安装方法

一.打开开始菜单 -- 服务器管理器 -- 管理 -- 添加角色和功能二.选择基于角色或基于功能的安装,单击"下一步" 三.选择从服务器池中选择服务器,单击"下一步" 五.为了保障兼容性,选择性安装 .Net 3.5 兼容旧程序. 六.单击 "下一步" 七.开始安装和安装结束八.然后我们就可以在开始菜单中找到 IIS 了,建议设置固定到"开始"屏幕 ,方面之后的操作九.扁平化的系统中,IIS 设置依旧原汁原味啊- 十
让IIS服务器支持flv,f4v,mp4在线播放(2003,2008)

上传了flv或MP4文件到服务器,可输入正确地址通过http协议来访问总是出现"无法找到该页"的404错误呢?这就表明mp4格式文件是服务器无法识别的,其实,这是没有在IIS中将相应的MIME类型进行设置的原因.那该怎样设置MIME类型呢? 开启mp4文件的话,需要在 "Internet信息(IIS)管理器"中右击需要更改的网站或目录,可以打开形如下图的窗口(我右击的是文件夹而不是站点,所以您右击站点的话打开的或许比我的选项卡多,不管怎样您点击HTTP头就可以打开怎
IIS7.0 Windows Server 2008 R2 下配置证书服务器和HTTPS方式访问网站的教程图文详解

配置环境 Windows版本:Windows Server 2008 R2 Enterprise Service Pack 1 系统类型: 64 位操作系统了解HTTPS 为什么需要 HTTPS ? 在我们浏览网站时,多数网站的URL都是以HTTP开头,HTTP协议我们比较熟悉,信息通过明文传输; 使用HTTP协议有它的优点,它与服务器间传输数据更快速准确; 但是HTTP明显是不安全的,我们也可以注意到,当我们在使用邮件或者是在线支付时,都是使用HTTPS; HTTPS传输数据需要使用证书并对
Vue项目打包部署到iis服务器的配置方法

一将Vue项目打包切换到项目目录下,输入cnpm run build 打包等待打包完成二 URL 重写访问我们的一个url 原因是vue不是根据项目目录的地址访问的,是根据vue-router转发路由访问url,在这里我们应该进行url rewrite url write的方式有两种,一种是在iis下载url rewrite工具配置规则另一种是配置web.config文件,我用的是第二种 web.config内容 <?xml version="1.0" encodin
IIS服务器同时设置多个网站的三种方式（图文）

似乎曾记得微软有一到面试题,就是让我们在同一台服务器上用相同IP,相同的端口配置出不同的网站(在url上输入不同的网站地址,可以访问到不同的网站根目录).这个面试题我只是在脑海里记得,可能不是微软的,但是我的记忆中就是微软的.不过这个不是我们今天讨论的重点,我们今天需要解决的问题是在如何配置不同的网站.当然也会解决上面的问题.当然这篇不是纯的技术文章,所以请那些只关注代码的程序员或者是计算机网络高手,高抬贵手,如有不对,请多多指教. 预备工作首先我们需要确定自己的服务器上已经装好了IIS和网络
vue项目打包部署到服务器的方法示例

上上一篇我写过一些关于vue项目部署到linux服务器的文章,但是那是以node作为开发环境 pm2 守护进程的方式,让他能正常运行,可是还是出现了问题,因为属于与APP交互的页面,在webView中打开过慢,APP的用户体验非常的差,所以我查找了资料,改变了部署方式,接下来我介绍一下这一次,我想Tomcat为例我们先看一下Linux中 Tomcat下面的目录结构: 以vue-cli 搭建出来的手脚架 webpack的模板下的/config/index.js,这里可以看到assetsPubl
vue项目打包部署_nginx代理访问方法详解

我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要修改如下配置文件: 配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 配置文件二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了
Vue项目打包部署到apache服务器的方法步骤

vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进行打包,打包后会在项目目录下生成一个dist文件夹,内容如下: 然后就是把这些文件丢到服务器上的某个文件夹下,我这里的文件夹名字是ibms 遇到的问题: 1. 直接去访问http://www.xxx.com/ibms/,会发现网页是白屏的,什么都没有,这就比较奇怪了,其实是因为资源加载的路径有问题!
Java结合Vue项目打包并进行服务器部署

目录 Java后端项目打包和服务器部署 Vue项目服务器部署两周前我刚刚入职实习的时候,后端的几个同事看到我需要学习如何把项目进行部署,都围过来教我怎么部署,我感觉学习到了很多,因此,记录一下学习的笔记.当然了,这些部署是建立在已经配置好tomcat(后端服务器)和nginx(前端服务器)的基础之上的,因为公司之前已经做好了,我只需要迭代即可. Java后端项目打包和服务器部署 1.IDEA点击maven,然后点击clean,接着点击package打包获得cr.war(在项目根目录的targe
Vue项目打包部署的实战过程记录

目录前言一.准备工作--服务器和nginx使用 1. 准备一台服务器 2. nginx安装和启动 3. 了解nginx: 修改nginx配置,让nginx服务器代理我们创建的文件二.Vue项目打包同步文件到远程服务器 1. 打包 2. 同步到远程服务器 3. 同步ssh key 三.非域名根路径发布 1. nginx配置 2. 项目配置 3. 绝对路径引用的静态资源找不到的问题四.history模式部署 1. 项目配置 2. nginx配置 3. history模式部署到非域名根路径下
Vue项目打包部署到GitHub Pages的实现步骤

目录前言前期准备重要说明步骤1 步骤2 步骤3 步骤4 步骤5 步骤6 前言关于什么是github pages?怎样创建github 仓库上传本地项目到GitHub远程仓库?等基本操作本文不再赘述,初学者可以通过搜索找到大量文章教程.本文重点在于: 如何将vue项目源码(含dist目录)同步到到github仓库,同时单独将项目下的dist目录同步到gh-pages分支以便使用GitHub pages 发布和预览静态网页. 针对以上问题,作者以往的做法是将Vue项目源码托管到源码仓库,然
vue项目打包部署流程分析

目录一.打包二.部署三.部署多个项目一.打包 (可选)去除打包后会生成的map文件:在vue.config.js中添加productionSourceMap: false, map文件作用:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错.map文件可以准确输出报错位置. 项目终端运行npm run build,出现的dist文件即为打包后的文件二.部署 xshell连接服务器(此处服务器为centos7) 利用xfp在服务器/root目录
vue项目打包部署后默认路由不正确的解决方案

目录打包部署后默认路由不正确问题描述解决方案 vue打包后路径不对对于背景图片不显示的问题动画无法运行小图标没了打包部署后默认路由不正确问题描述 vue项目本地开发的时候默认路由没问题,例如 redirect:"/index" 但是部署以后,服务器上默认路由不正确,现在遇到的问题是,会默认跳转到login页面,前提项目没有做路由权限. 解决方案打开路由index.js文件,添加:base:"/" const routers = new Router
vue项目适配大屏端的方法示例

浅析rem 首先rem是css单位,相比于px固定的像素单位,rem更加的灵活,还有现在也比较好的vm.如果从未了解过,可以先过过眼 rem自适应.CSS3的REM设置字体大小 font size of the root element. 简单来说,rem就是根据html元素的字体大小来计算单位的.我们的需求就是说,根据不同的分辨率,我们元素的大小能够有所对应的变化,在视觉上能够做到很舒服的效果.想想我们在做pc端的时候,一般都是中间固定比如1200px像素,然后最小1200px,两边留白,这样

vue项目打包部署到服务器的方法示例

相关推荐

随机推荐