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

1.檢查本機vue版本

vue -V

2.升級vue3.0命令

npm install -g @vue/cli

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

 1 module.exports = {
 2   runtimeCompiler: true, //是否使用包含運行時編譯器的 Vue 構建版本
 3   publicPath: '',
 4   productionSourceMap: false, //不在production環境使用SourceMap
 5   devServer: {
 6     //跨域
 7     port: 9527, // 端口號
 8     open: true, //配置自動啓動瀏覽器
 9     proxy: {
10       // 配置跨域處理 能夠設置多個
11       '/api': {
12         target: 'xxxx',
13         ws: true,
14         changeOrigin: true
15       }
16     }
17   }
18 }

4.設置scss/sass全局變量

 1 module.exports = {
 2   // ...
 3   css: {
 4     loaderOptions: {
 5       sass: {
 6         data: `
 7           @import "@/assets/styles/_variable.scss"; // 路徑自配
 8         `
 9       }
10     }
11   }
12 }

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

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