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 就可以正常访问了。

  • 相关阅读:
    nginx不支持pathinfo模式解决方法
    php只保留两位小数
    分享图文到QQ空间
    android 使用信鸽推送通知栏不显示推送的通知?
    Editetext获取焦点后让输入软键盘中出现搜索按键
    Android EditText的使用过程中遇到的问题
    在线根据现有apk生成指定id的推广apk (已过时)
    @Validated和@Valid区别
    idea快捷键使用总结
    大概
  • 原文地址:https://www.cnblogs.com/joe235/p/12522175.html
Copyright © 2011-2022 走看看