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 学习点滴记录
Apr 24 Javascript
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
深入解析Vue 组件命名那些事
Jul 18 Javascript
Parcel 打包示例(React HelloWorld)
Jan 16 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 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的面向对象编程
2006/10/09 PHP
PHPMailer 中文使用说明小结
2010/01/22 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
php 数据结构之链表队列
2017/10/17 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
分享20款好玩的jQuery游戏
2011/04/17 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
python uuid模块使用实例
2015/04/08 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
python实现微信远程控制电脑
2018/02/22 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
网络工程师职业规划
2014/02/10 职场文书
班级文化标语
2014/06/23 职场文书
大学生党课感想
2015/08/11 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS