vue-cli webpack-simple 模板 打包上线浏览

一、首先用vue-cli 生成一个webpack-simple模板的项目，名为webpack-simple-demo

     1、 vue init webpack-simple webpack-simple-demo  

     2、进入到项目里面  cd webpack-simple-demo

     3、加载项目所需要的模块  npm install 

     4、启动项目  npm run dev 

     

二、打包上线

发现webpack模块的项目和webpack-simple模块的项目打包后生成的文件是不一样的，webpack模块可以直接打包后直接访问，而webpack-simple不可以，意思就是webpack-simple打包后不能再file路径下访问，需要再http路径下访问，所以用到了IIS。

      1、打包 npm run build

       同样会生成一个dist文件

      2、将dist文件和index.html文件放到一个新的文件夹下面 webpack-simple-demo-iis

      3、IIS部署

          打开控制面板，点开程序与服务

         

         点开：  启用或关闭Windows功能

 

         会出现这个页面，找到  Internet information services （Internet信息服务），勾选全部，

IIS 选择完成，接下来添加网站。

三、添加 打包的 webpack-simple-demo-iis 网站

1、开始 菜单搜索 IIS，选择Internet信息服务（IIS）管理器，点击进入

   

  

在 网站 上右击选择 添加网站，输入自定义网站名（可以是项目名，比较好找），选择物理路径（项目发布文件的路径），接下来设置端口号，一定要设置且不能重复。80端口默认的不能使用，随便输入一个没有被用过的即可。主机名不要填，否则别人访问不了。点击确定就好了。

确定后，网站中就会出现新添加的网站