一、项目目录

二、vue.config.js

需求：

1. 项目打包时，文件后缀增加时间戳（防止服务器缓存）
2. 加载less公共文件
3. 跨域代理

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')

七、readMe

Project setup

npm install

Compiles and hot-reloads for test(local)

npm run test

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build