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 相关文章推荐
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
Nov 12 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
JavaScript之Vue.js【入门基础】
Dec 06 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 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在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
2016/06/26 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
python微信撤回监测代码
2019/04/29 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
中专生自我鉴定书范文
2013/12/28 职场文书
社团文化节策划书
2014/02/01 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
高二化学教学反思
2016/02/22 职场文书
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android
把77A收信机改造成收音机
2022/04/05 无线电