zoukankan      html  css  js  c++  java
  • 十二、VueJs 填坑日记之项目打包发布

    通过上一篇博文的学习,我们其实已经完成了我们设想的项目的开发。但是,我们做好的这套东西,是基于 nodejs 开发的。而我们最终希望,我们开发的项目,生成好一堆文件,然后随便通过任何一个 http 服务就能跑起来,也就是,还原成我们熟悉的 html+css+js 的模式。这章,我们来讲解这部分内容。另外我的博客即将同步至腾讯云+社区,邀请大家一同入驻。

    打包项目
    进入到我们的项目根目录

    d:
    cd vueworks/my-vue
    

    然后运行如下代码,进行打包:

    npm run build
    

    结果如下:

    现在我们已经把项目打包好,打完好的项目默认位置在/dist文件夹里。

    我们从打包时的cmd的日志来看,里面有很多的map文件的生成,由于截图有限,上面只是截取了结尾,大家可以向上滚动一下,就可以看到,如果项目比较大的时候,这些文件一个是比较大,另一个就是编译比较慢。所以我们把这些map文件去掉。


    去掉 map 文件
    打开 /config/index.js 文件,找到其中的productionSourceMap: true,大根在build下。默认是true,修改为false:

    productionSourceMap: false,
    

    然后重新打包

    npm run build
    

    大家可以看日志,这次map文件已经没有了,到这里我们就完成了项目的打包。上面有个Tip,提示我们打包完的项目,必须要在http server下才能运行。

    安装http server
    我们进入 dist 文件夹,然后启动一个 http 服务,来看看可以不可以访问。你可能不知道如何启动这样一个 http 服务,或者,你现在已经到 apache 里面去进行配置去了。不用那么麻烦,我们有 nodejs 环境,只要全局安装一个 http-server 服务就好了呀。

    npm install http-server -g

    在安装的过程,大家可以用cnpm来代替npm。在windows上安装完,直接就可以运行了。切换到dist目录,运行

    http-server -p 3000
    

    如果你是严格按照我的教程来的,那么现在已经可以顺利的跑起来了。我们在浏览器中输入 http://127.0.0.1:3000 就应该可以访问了。当然,会报错,说是接口找不到,404错误。因为我们把接口给通过代理的方式开启到了本地,但是这里我们并没有开启代理,所以就跑不起来了。很正常的。这是因为示例的接口的问题。实际开发你还要按照我的这个做。只不过,最终代码放到真实的服务器环境去和后端接口在一个 http服务下面的话,就不存在这个问题了。

    将项目打包到子目录
    刚刚,我们是将文件,打包为根目录访问的。也就是说,必须在 dist 文件夹下面启动一个服务,才能把项目跑起来。
    但是我们开发的大多数项目,可能是必须跑在二级目录,甚至更深层次的目录的。怎么做呢?
    我们编辑 config/index.js 文件,找到assetsPublicPath: '/',把/修改为我们的子目录的路径就行了,这里我要放到wemz,于是,我修改为如下代码:

    assetsPublicPath: '/wemz/',
    

    然后,重新运行

    npm run build
    

    还记得,我们在项目文件夹中用 npm run dev 就可以开启一个 http 服务吗?并且那里,我们还代理了接口的。我们就这么做。然后我们访问二级目录 /dist/ 我们就可以看到效果了。

    注意,我访问的不是根目录,而是 /wemz/ 这个子目录哦,这里是访问的我们打包的文件的。虽然实际生成的文件还是在dist目录里,但是wemz这个目录就可以访问了。将来也可以直接将dist目录下的所有文件复制到所有服务器上的/wemz的目录里。

    最后附上代码的git:https://gitee.com/isoftforce/vue-sample.git

    忠心感谢FungLeo,是你们无私的奉献,才让我们有了学习的参考,以下是地址:
    http://blog.csdn.net/FungLeo/article/details/77606216

  • 相关阅读:
    UVa 1151 Buy or Build【最小生成树】
    UVa 216 Getting in Line【枚举排列】
    UVa 729 The Hamming Distance Problem【枚举排列】
    HDU 5214 Movie【贪心】
    HDU 5223 GCD
    POJ 1144 Network【割顶】
    UVa 11025 The broken pedometer【枚举子集】
    HDU 2515 Yanghee 的算术【找规律】
    Java基本语法
    Java环境变量,jdk和jre的区别,面向对象语言编程
  • 原文地址:https://www.cnblogs.com/xinhudong/p/7940721.html
Copyright © 2011-2022 走看看