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 相关文章推荐
JavaScript实现的日期控件具体代码
Nov 18 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
canvas实现图像放大镜
Feb 06 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
Feb 14 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
react-native android状态栏的实现
Jun 15 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 19 Javascript
深入浅析vue全局环境变量和模式
Apr 28 Javascript
使用Vant完成Dialog弹框案例
Nov 11 Javascript
解决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
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
PHP 判断常量,变量和函数是否存在
2009/04/26 PHP
php+mysql事务rollback&commit示例
2010/02/08 PHP
PHP中json_encode、json_decode与serialize、unserialize的性能测试分析
2010/06/09 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
JavaScript游戏之优化篇
2010/11/08 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
使用Python的PIL模块来进行图片对比
2016/02/18 Python
python监控文件或目录变化
2016/06/07 Python
python+django快速实现文件上传
2016/10/24 Python
Python如何快速实现分布式任务
2017/07/06 Python
Python爬虫包BeautifulSoup简介与安装(一)
2018/06/17 Python
python+opencv打开摄像头,保存视频、拍照功能的实现方法
2019/01/08 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
幼儿园教师节活动方案
2014/02/02 职场文书
开业主持词
2014/03/21 职场文书
市政管理求职信范文
2014/05/07 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
《小乌鸦爱妈妈》教学反思
2016/02/19 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
MySQL的索引你了解吗
2022/03/13 MySQL