zoukankan      html  css  js  c++  java
  • Vue2.5 旅游项目实例27 联调测试上线-项目打包上线

    打开命令行,进入项目的目录,输入:

    npm run build

    这时候Vue的脚手架工具会自动对src下的源代码,进行打包编译,生成一个能被浏览器运行的代码,同时也是压缩过后的代码。

    完成后,控制台会显示:

    Build complete.

    现在打开项目目录,会发现多出一个 dist 文件夹,这个文件夹里的代码就是我们最终要上线的代码。

    然后我们需要把 dist 这个文件夹,发给后端的同学放在后端的服务器上。也就是说把 dist 目录下的 static 文件夹 和 index.html 文件,拷贝放到后端项目的根目录下。

    这时我们在浏览器打开 localhost 就可以访问了,这时访问的是后台服务器上,默认的80端口。

    当你想把代码单独放到一个目录下的时候,比如:放在后端项目的根目录下的project目录下,直接运行 localhost/project 会报错,提示项目打包的文件路径引用产生了问题。

    怎么解决呢?我们需要修改下代码。

    打开项目下的config目录下的index.js文件:

    往下翻,找到 build 区域,打包部分的配置项,修改:

    build: {
        。。。
        assetsPublicPath: '/project',

    修改完成后保存。

    重新进行项目打包:

    npm run build

    打包完成后又会在项目下重新生成一个 dist 文件夹,然后我们把 dist 里的内容,拷贝到后端根目录下的 project 文件夹下就可以了。

    现在在浏览器运行 localhost/project 就可以正常访问了。

  • 相关阅读:
    正则表达式入门(3)
    正则表达式入门(2)
    正则表达式入门
    函数的参数传递
    python常用库之random
    插入排序与归并排序
    浅拷贝与深拷贝
    装饰器学习小程序
    Python的“is”与“==”
    Oracle中断中止exp/imp和expdp/impdp数据库导入导出
  • 原文地址:https://www.cnblogs.com/joe235/p/12522175.html
Copyright © 2011-2022 走看看