前端项目打包部署

通过vue-cli和webpack构建的项目体积一般都较大,在生产环境下,需要进行打包部署。

1.准备

  • 打包前,将config目录下的index.js文件做修改,将assertsPublicPath的"/"修改为"./"

    image
  • 路由模式修改
    将router下的index.js路由文件的history模式去掉

2.打包

  • 项目路径下,运行打包命令
npm run build

  • build结束后的结果,项目路径会出现一个dist目录

    image
  • 进入dist目录

    image

3.部署

  • 解压nginx到本地目录

    image
  • 复制打包的dist文件夹到nginx的html目录

    image
  • 命令行进入nginx目录后,运行

start nginx

一闪而过

输入http://localhost/dist,可以看到项目运行结果

image
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容