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 相关文章推荐
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
Vue.js学习之计算属性
Jan 22 Javascript
xmlplus组件设计系列之图标(ICON)(1)
May 05 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
vue实现跨域的方法分析
May 21 Javascript
layui的select联动实现代码
Sep 28 Javascript
js实现有趣的倒计时效果
Jan 19 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
PHP Mysql编程之高级技巧
2008/08/27 PHP
PHP 可阅读随机字符串代码
2010/05/26 PHP
PHP中的float类型使用说明
2010/07/27 PHP
php UBB 解析实现代码
2011/11/27 PHP
smarty实现多级分类的方法
2014/12/05 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
Vue的Options用法说明
2020/08/14 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
简单介绍Python中的floor()方法
2015/05/15 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
PHP如何设置和取得Cookie值
2015/06/30 面试题
幼儿运动会邀请函
2014/01/17 职场文书
爱护公物标语
2014/06/24 职场文书
教师工作能力自我评价
2015/03/04 职场文书
中英文求职信范文
2015/03/19 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js