vue-cli3專案完整配置

阿新 • • 發佈：2021-02-06

一、專案目錄

在這裡插入圖片描述

二、vue.config.js

需求：

專案打包時，檔案字尾增加時間戳（防止伺服器快取）
載入less公共檔案
跨域代理

const path = require("path");

const Timestamp = new Date().getTime();
module.exports = {
	configureWebpack: {
		output: { // 輸出重構  打包編譯後的 檔名稱  【模組名稱.版本號.時間戳】
			filename: `[name].${Timestamp}.js`,
			chunkFilename: 
 `[name].${Timestamp}.js`
		},
	},
	pluginOptions: {
		//預載入公共less
		"style-resources-loader": {
			preProcessor: "less",
			patterns: [
				path.resolve(__dirname, "./src/assets/css/common.less")
			]
		}
	},
	devServer: {
		//跨域代理
		proxy: {
			'/api': {
				target: process.env. 
VUE_APP_APIADDRESS,
				changeOrigin: true,
				ws: true,
				pathRewrite: {
					'^/api': ''
				}
			}
		}
	}
}

function resolve(dir) {
	return path.join(__dirname, dir)
}

三、package.json

配置依賴：
1.axios
2.vant(UI框架)
3.vconsole(除錯視窗)
4.less
5.style預載入

注：指令碼中修改執行命令
測試：vue-cli-service serve
生產：vue-cli-service build

{
  "name": "web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "test": "vue-cli-service serve --mode test",
    "serve": "vue-cli-service build --mode development",
    "build": "vue-cli-service build --mode production"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "vant": "^2.12.2",
    "vconsole": "^3.3.4",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "axios": "^0.18.0",
    "babel-plugin-import": "^1.13.3",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "style-resources-loader": "^1.3.2",
    "vue-cli-plugin-axios": "0.0.4",
    "vue-cli-plugin-style-resources-loader": "~0.1.4",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

四、babel.config.js

引入UI框架vant

module.exports = {
	presets: [
		'@vue/cli-plugin-babel/preset'
	],
	plugins: [
		['import', {
			libraryName: 'vant',
			libraryDirectory: 'es',
			style: true
		}, 'vant']
	]
}

五、環境配置檔案

.env.test

NODE_ENV=test
VUE_APP_APIADDRESS=''

.env.development

NODE_ENV=development
VUE_APP_APIADDRESS=''

.env.production

NODE_ENV=production
VUE_APP_APIADDRESS=''

六、main.js

import Vue from 'vue'
import axios from './plugins/axios' //請求頭部處理封裝
import App from './App.vue'
import router from './router'
import "@/assets/js/m-base.js"; //移動端自適應
import user from './plugins/user.js' //使用者資訊處理檔案
import Vconsole from 'vconsole'

//測試環境開啟除錯
if(process.env.NODE_ENV === "development" ){ 
	let vConsole = new Vconsole();
	Vue.use(vConsole)
}

//使用者資訊作為全域性變數
Vue.prototype.user=user; 
Vue.config.productionTip = false

//讀取當前頁面title
router.beforeEach((to, from, next) => {
  /* 路由發生變化修改頁面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

new Vue({
  router,
  axios,
  render: h => h(App)
}).$mount('#app')