vue dist包部署到码云Page服务

实在不想买服务器，于是打算把vue项目部署到码云的Page服务上试试，但是默认配置部署到码云上静态文件回404无法访问

故需配置webpack

部署前提

      前端必须接入线上的后台服务api

配置webpack(仅适用于vue-cli3以上)

 根目录新建vue.config.js

module.exports = {
    // 这里是脚手架的配置,
    // 其中如果想修改 webpack 配置
    publicPath:'./',
    configureWebpack:{
        // 声明在 configureWebpack 属性对象里面即可
        // 如果没有这个需要, 这个文件可以不存在
    }
}

     

 

 打包

dist包应与项目分开上传到码云，建议在dist中git init 这样可以随时更新dist包的内容，那么此时每次打包前并不需要清除dist包，因为每次清除dist包会将dist包中的.git文件清除，会导致dist包的git记录丢失，所以需要把打包前清除dist包插件禁用。

禁用打包前清除dist包插件：

在pageage.json文件中：

"scripts": {
    "serve": "vue-cli-service serve --open",
    //在vue-cli-service build后面加上--no-clean
    "build": "vue-cli-service build --no-clean"
  },

  再打包： 

npm run build

 打包后将dist上传到码云

部署

  选择Page服务

 

 

更新后，网站地址即可使用

注意：page服务无论是选择http还是https开头，必须和后台服务保持一致，否则会引起请求block:mixed-content的问题，导致无法访问后台接口