Skip to main content

Vue 打包部署

vue2.x的打包上线--小记#

vue-cli#

  1. 用vue-cli脚手架构建的项目，可以用内置命令脚本打包项目
yarn build# ornpm run builds
  1. 执行命令后会生成一个打包好的文件夹dist(默认)

部署项目就是将这个文件夹的文件部署到服务器

  • 如果项目要部署的到主机(服务器)的根目录上直接部署就可以.

  • 如果项目是在二级目录中，就要在打包前配置一下路径：

在源码根目录中创建一个vue.config.js文件，写以下配置：

// vue.config.jsmodule.exports = {    // projectname 就是你要部署的二级目录名称，如果部署到github后gitee，就是你的仓库名    publicPath: "/projectname/",    // 或者配置成变量形式，区分生产模式和开发模式    // publicPath: process.env.NODE_ENV === 'production' ? '/projectname' : '/'}

如果使用了路由router,还应配置base路径：

// 挂载路由处const router = new VueRouter({    mode: 'history',    // 配置路由基础路径    base: '/projectname/',    // base: process.env.BASE_URL,  //默认配置    routes})

* 然后重新打包build一下，再部署项目即可！