vue 不同环境打包

  • vue开发完成之后就要分不同环境打包测试,本文即打包sit,prod环境,并在本地可以正常运行npm run dev 的解决方案
  • 安装cross-env,cnpm install cross-env,在你项目根目录下执行
    vue 不同环境打包_第1张图片
  • 在package.json增加打包命令
    vue 不同环境打包_第2张图片
    • 在config下增加对应的配置文件,原来的prod配置文件也要加上 ENV_CONFIG:‘“prod”’,项。
  • vue 不同环境打包_第3张图片
    • 修改index.js,引入配置文件,assetsPublicPath配置为你在tomcat下建立的要访问的目录名。例如 myproject
      vue 不同环境打包_第4张图片
      vue 不同环境打包_第5张图片
    • 修改util.js ,增加访问路径的相对地址。多个环境,因此assetsSubDirectory的值做一个多次判断最后赋值。
      vue 不同环境打包_第6张图片
      vue 不同环境打包_第7张图片
    • 修改webpack.prod.conf.js配置,同样是多环境下env的赋值操作。
      vue 不同环境打包_第8张图片
    • 修改webpack.base.conf.js配置,同样是多环境下env的赋值操作。
    • vue 不同环境打包_第9张图片
    • 修改build.js.删除指定的环境,打印出正在打包的环境。
      vue 不同环境打包_第10张图片
    • 到此完成。打包命令npm run build:sit npm run build:prod
      vue 不同环境打包_第11张图片
    • 项目架构
      vue 不同环境打包_第12张图片
    • 打包后查看index.html,可以看到你引入的js的路径
    • vue 不同环境打包_第13张图片
    • 如有疑问,欢迎留言

你可能感兴趣的:(#,vue)