Vue项目webpack打包部署到服务器的实例详解


Posted in Javascript onJuly 17, 2017

Vue项目webpack打包部署到服务器

这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例。

必须要配置的就是/config/index.js

在vue-cli webpack的模板下的/config/index.js,我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'变为了./,然后我就执行了npm run build,打包成功之后,可以看到项目中会多出来一个文件夹,就是dist,里面有一个static文件夹和index.html,然后我就将dist目录下的文件拷贝到Tomcat服务器下,会发现访问到的是一个空白页面,但是当我把它放在..\webapps\ROOT目录下,它就可以访问了

Tomcat下面的目录结构:

Vue项目webpack打包部署到服务器的实例详解

但是这肯定是不行的,然后我就开始寻找答案,也根据别人的一些步骤做了下来,后来发现还是有一些问题的,没有办法访问到主页面,虽然吧,一直都没成功,但是我也没放弃,然后就综合了一下问答里面别人说的,进行了几次尝试,最后成功了。(给大家一个小建议:别放弃就好)。

下面的就是我的config/index.js的配置:

// see http://vuejs-templates.github.io/webpack for documentation.
var 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: 8080,
  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所对应的值,我这里用的是./,我也用webapps下的命的项目名试过,只是没得到我想要的结果,后来我还是改成了./

使用vue-router的情况

当你在项目中使用vue-router的时候,就需要给src/router/index.js添点东西,如下面:

export default new Router({
 mode : 'history',
 base: '/ttms/', //添加的地方
 ...
 }

然后执行npm run dev,将打包后的文件放在Tomcat的目录下的WebApps下的ttms中,然后,就可以访问到了:http://localhost:8080/ttms/

以上就是关于Vue项目webpack打包部署到服务器的实例详解的资料,关于Vue的开发文章本站还很多,希望大家搜索参阅,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
在网页里看flash的trace数据的js类
Jan 10 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
AngularJS基础知识笔记之过滤器
May 10 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 Javascript
JS中Safari浏览器中的Date
Jul 17 #Javascript
Vue.extend构造器的详解
Jul 17 #Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 #Javascript
extjs简介_动力节点Java学院整理
Jul 17 #Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 #jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 #jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 #jQuery
You might like
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
常用PHP封装分页工具类
2017/01/14 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
2010/01/02 Javascript
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
css配合jquery美化 select
2013/11/29 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
javascript History对象原理解析
2020/02/17 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
详解详解Python中writelines()方法的使用
2015/05/25 Python
python 上下文管理器使用方法小结
2017/10/10 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
如何定义TensorFlow输入节点
2020/01/23 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
Python排序函数的使用方法详解
2020/12/11 Python
python中pickle模块浅析
2020/12/29 Python
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
SQL Server笔试题
2012/01/10 面试题
校园活动宣传方案
2014/03/28 职场文书
教师师德演讲稿
2014/05/06 职场文书
跑操口号
2014/06/12 职场文书
标准发言稿结尾
2019/07/18 职场文书
SQL Server使用导出向导功能
2022/04/08 SQL Server