webpack打包vue项目之后生成的dist文件该怎么启动运行
亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行。
我的vue项目结构如下:
1. 进入该vue项目目录,打开git bash,执行:npm run build(在package.json的scripts配置)
执行成功如下图所示:
然后此时你会发现项目下多了一个 dist 文件夹,dist下文件便是项目打包之后生成的文件。
此时我们直接在浏览器中打开index.html,是会报错的,什么都看不到。
2. 安装express-generator生成器
执行 $ npm install express-generator -g 进行安装
3. 创建一个express项目
执行 $ express expressDemo (expressDemo是项目名)
expressDemo项目目录如下图:
4. 进入expressDemo目录,安装项目依赖
$ cd expressDemo
$ npm install
5. 把dist目录下的所有文件复制到express项目的public文件夹下
然后运行 $ npm start 启动expressDemo
打开浏览器,输入 http://localhost:3000 , 就可以看到效果了
webpack打包vue项目之后生成的dist文件该怎么启动运行的更多相关文章
- vue 项目之后生成的 dist 文件该怎么在本地启动运行
简单高效 npm i -g servecd distserve
- 如何做到在webpack打包vue项目后,在外部动态修改配置文件
在我们做完vue项目后,只需要执行 npm run dist 就可以轻松进行打包转测试,可是如果我们临时需要修改一些配置文件比如域名,这时候我们就有点懵逼了,那就修改了再重新打一次包? NO NO N ...
- 16.如何做到webpack打包vue项目后,可以修改配置文件
问题描述: 前端需要修改restful API的url,但是打包之后,配置文件找不到了,如果在npm run build 生成dist后,这个配置也被写死了,传到运行的前端服务器上后,假设某次,api ...
- webpack打包vue项目,资源路径如何从绝对路径改为相对路径?css中的图片资源如何修改配置?
资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...
- 解决webpack打包vue项目后,部署完成后,刷新页面页面404
1.url不动式url完全不动,即你的页面怎么改变,怎么跳转url都不会改变.这种情况的原理 就是纯ajax拿到页面后替换原页面中的元素,刷新页面就是首页 2.带hash(#)式这种相对于第一种的话刷 ...
- webpack打包vue项目之后怎么启动&注意事项
参考路径:https://blog.csdn.net/cn_yaojin/article/details/80164477 参考路径:https://www.imooc.com/article/323 ...
- vue项目通过webpack打包生成的dist文件放到express环境里运行(vue+webpack+express)
1.首先需要的原料肯定是vue打包生成的dist文件 在vue项目目录下运行:npm run build,等待运行结束,会在项目目录下生成一个dist文件夹,里面会生成一些文件(如下图示) 小的项目文 ...
- Cordova打包vue项目生成Apk (解决cordova build android抛出的zip问题)
最近对vue前端框架情有独钟.但研究了一下怎么把vue项目打包成android apk来玩玩. 首先讲一下创建vue2.x项目.其实在之前的文章中都有写过,有兴趣的同学可以去看看.http://www ...
- 教你用Cordova打包Vue项目
现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app. 据我现在的了解打包Vue项目目前流行的就是使用weex和cordova.weex是 ...
随机推荐
- 如何使用gradle打jar包
1.进入工程目录,输入./gradlew,如显示"... build success" 则表示当前目录下gradle可用:如当前目录下无gradle,则在线下载 .. 2.输入./ ...
- odoo开发笔记 -- 用户配置界面如何增加模块访问权限
在odoo设置界面,点击用户,进入用户配置界面,会看到: 访问权 | 个人资料菜单 在访问权 page菜单界面,可以看到系统预制的一些模块都会显示在这里, 那么,我们自己开发的模块如何显示在这块呢,从 ...
- odoo开发笔记--模型字段compute用法
compute属性,实现的主要功能是,前端界面选择某个字段的时候,指定与该字段关联的其他字段可以关联,并联动的显示. 可以和inverse属性同时使用,不加inverse属性的话,前端界面的显示效果只 ...
- element UI form 验证
1 form 添加rules,具体属性添加prop, 注意 prop 属性与v-model 子属性一致 2 data 对象添加 rules 3 验证方法调用 验证规则见: https://github ...
- django2笔记:路由path语法
django2笔记:路由path语法 9月23,Django 发布了2.0a1版本,这是一个 feature freeze 版本,如果没有什么意外的话,2.0正式版不会再增加新的功能了.按照以往的规律 ...
- Numpy 常用矩阵计算函数
基本属性 在做一些数据分析的时候,我们通常会把数据存为矩阵的形式,然后python本身对于矩阵的操作是不够的,因此出现了numpy这样一个科学开发库来进行python在次上面的不足. Numpy's ...
- 公共技术点( View 事件传递)
转载地址:http://p.codekk.com/blogs/detail/54cfab086c4761e5001b253e 本文为 Android 开源项目源码解析 公共技术点中的 View 事件传 ...
- 为什么研发团队不适合量化KPI的绩效考核?
研发团队(如果不是外包,不是机械性的活动)如果进行的是creative的有创造性的智力活动,那么应该不适合用量化KPI的绩效考核和激励,不应该用工时.bug数(难度大的bug可能多,测试人员可能没有经 ...
- iOS 8.0 bluetooth peripheral manager giving no callback for addService
I am adding the service using: [self.peripheralManager addService:myService]; Is this method depreca ...
- [转]史上最佳 Mac+PhpStorm+XAMPP+Xdebug 集成开发和断点调试环境的配置
本文转自:https://www.cnblogs.com/lishiyun19/p/4470086.html 在上一篇 PHP 系列的文章<PHP 集成开发环境比较>中,我根据自己的亲身体 ...