VUE3.0升級與配置（跨域、全局scss變量等）

1.檢查本機vue版本

vue -V

2.升級vue3.0命令

npm install -g @vue/cli

3.創建完項目后，在項目根目錄新增vue.config.js文件，插入代碼（簡潔）

module.exports = {
  runtimeCompiler: true, //是否使用包含運行時編譯器的 Vue 構建版本
  publicPath: '',
  productionSourceMap: false, //不在production環境使用SourceMap
  devServer: {
    //跨域
    port: 9527, // 端口號
    open: true, //配置自動啟動瀏覽器
    proxy: {
      // 配置跨域處理 可以設置多個
      '/api': {
        target: 'xxxx',
        ws: true,
        changeOrigin: true
      }
    }
  }
}

4.設置scss/sass全局變量

module.exports = {
  // ...
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/assets/styles/_variable.scss"; // 路徑自配
        `
      }
    }
  }
}

官網配置地址：https://cli.vuejs.org/zh/config/#vue-config-js

需要注意的是，baseUrl從 Vue CLI 3.3 起已棄用，需要使用publicPath。