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

发布后项目预览

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