Vue教程(三)vue-cli 构建Vue项目后的打包和发布

导读:本文主要介绍使用 vue-cli 构建项目后的打包和发布这两方面的内容

一项目打包

- 1 打包的配置在 build/webpack.base.conf.js文件下

打包配置

常量config在vue/config/index.js 文件下配置,__dirname是定义在项目的全局变量,是当前文件所在项目的文件夹的绝对路径。


__dirname的定义

- 2 需要修改vue/config/index.js 文件下的将build对象下的assetsPublicPath中的“/”,改为“./”

vue/config/index.js配置

-3 采用npm run build打包

打包

-4 打包成功后,会发现在项目根目录增加一个文件夹dist

打包成功后项目目录
image.png

用浏览器打开dist文件下的index.html


index.html
浏览器打开主页面

浏览器打开dist文件下的index.html后,页面正常,则说明打包成功了,可以发布到服务器上。

二项目发布

由于我是.net 的后台开发者,在此先介绍在IIS服务器上对vue-cli 构建项目的发布

  • 打开IIS管理器,新建一个网站VueProject


    image.png
image.png

点击确定,项目就发布出去了。

用浏览器打开http://192.168.0.89:10222


发布后项目预览

结束:以上都是我自学研究的结果,水平有限,欢迎指正。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容