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


Posted in Javascript onAugust 27, 2018

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

这一次,我想Tomcat为例

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

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

以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://3water.com/article/129750.htm,或许能找到解决方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js获取指定日期前后的日期代码
Aug 20 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
Dec 14 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 Javascript
js图片轮播插件的封装
Jul 21 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
解决vue中修改了数据但视图无法更新的情况
Aug 27 #Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 #Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 #Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 #Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 #Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 #Javascript
JS常见构造模式实例对比分析
Aug 27 #Javascript
You might like
让PHP支持页面回退的两种方法
2008/01/10 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
js 操作css实现代码
2009/06/11 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
flask中过滤器的使用详解
2018/08/01 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
python的等深分箱实例
2019/11/22 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
介绍一些UNIX常用简单命令
2014/11/11 面试题
研究生求职推荐信范文
2013/11/30 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
家庭教育的心得体会
2014/09/01 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
Mysql忘记密码解决方法
2022/02/12 MySQL
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS