Next time, hahaha ~ the following several articles are some notes for the recent enrollment form.

Vue-cli3 projects are packaged and deployed on the OSS server

  • NPM install webpack-aliyun-oss

  • Add the oss.js file to the project directory

    .exports = {
  region: 'OSS server Area'.// For example: oss-CN-Beijing
  accessKeyId: 'accessKeyId'.accessKeySecret: 'accessKeySecret'.bucket: 'bucket'
}
Copy the code

  • The above image has two vue.config.js for my own convenience debugging, because if changed to the following configuration, NPM run serve will be invalid, at this time, it is troublesome to have NPM run build, and can not modify the code in real time to see the effect. (The other JS is your previous vue.config.js)

    // const webpack = require("webpack");
// const path = require('path');
const oss = require('./oss.config');    // Import the newly created oss.js file
const WebpackAliyunOss = require('webpack-aliyun-oss');
console.log(WebpackAliyunOss)
module.exports = {
    devServer: {
        open: true.hot: true,},publicPath: 'https://XXX/test/'.//publicPath: './',

    productionSourceMap: false.configureWebpack: config= > {
    let webpackAliyunOss = [
      new WebpackAliyunOss({
        from: ['./dist/**'.'! ./dist/**/*.html'].// Upload that file or folder can be a string or an array
        dist: "/test".// The given file directory that needs to be uploaded to oss
        region: oss.region,
        accessKeyId: oss.accessKeyId,
        accessKeySecret: oss.accessKeySecret,
        bucket: oss.bucket,
        
        // test: true,   
        // Check whether the upload path is correct. If you open it, only the upload path will be displayed.
        
        // Because the difference between file identifiers "\" and "/" is not setOssPath configured, the uploaded folder will be spelled on the file name, and the file directory will be lost, so you need to configure setOssPath.
        setOssPath: filePath= > {
          // some operations to filePath
          let index = filePath.lastIndexOf("dist");
          let Path = filePath.substring(index + 4, filePath.length);
          return Path.replace(/\\/g."/");
        },
        setHeaders: filePath= > {
          // some operations to filePath
          // return false to use default header
          return {
            "Cache-Control": "max-age=31536000"}; }})]; config.plugins = [...config.plugins, ...webpackAliyunOss ]; }}Copy the code

  • To prevent information from being submitted to Github, modify the.gitignore file contents to be added at the end of the file/oss.js

  • Finally, type NPM run build in console, open index.html in dist directory, and you will see the deployed page