Vue3 项目搭建基本配置

一、创建项目

vue create 项目名称

二、安装依赖

1.安装axios、vue-axios

npm install axios vue-axios --save

2.安装UI库 element-plus

npm install element-plus -S

3.安装路由库 vue-router

npm install vue-router --save

npm install vuex -S

安装后package.json 文件依赖如下

{
  "name": "vue3-elementplus-demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve ",
    "build": "vue-cli-service build "
  },
  "dependencies": {
    "axios": "^0.24.0",
    "core-js": "^3.6.5",
    "element-plus": "^1.2.0-beta.3",
    "vue": "^3.0.0",
    "vue-axios": "^3.4.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0"
  }
}

三、main.js配置

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import axios from 'axios';
import VueAxios from 'vue-axios';

const app = createApp(App)
app.config.globalProperties.$http = axios
app.use(ElementPlus)
app.use(VueAxios, request);
app.use(store)
app.use(router)
app.mount('#app')

四、路由router配置（index.js）

import {createRouter, createWebHistory} from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Index',
    component: () => import( '../views/Index.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import( '../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
  mode: history
})

export default router

五、开发环境跨域配置

在项目根目录下新建vue.config.js文件，文件内容如下

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        // target: 'http://localhost:1288/',
        // 目标路径（真实要访问的后端服务路径）
        target: 'https://www.baidu.com/',
        ws: true,
        changeOrigin: true,
        // secure: false,
        // 路径重写
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

1.配置baseURL

在main.js中增加如下配置

export const request = axios.create({
  baseURL: '/api'
})
// 这里需要改下
app.config.globalProperties.$http = request

六、解决开发环境跨域代理生效，生产环境不生效问题

1.在项目根路径增加环境配置文件：.env.development、.env.production，内容分别为

NODE_ENV='development'
VUE_APP_MODE=‘开发'

NODE_ENV='production'
VUE_APP_MODE=‘生产'

2.修改构建脚本，使用指定的环境文件

{
  "name": "vue3-elementplus-demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    // 指定环境文件
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build --mode production"
  },
  "dependencies": {
    "axios": "^0.24.0",
    "core-js": "^3.6.5",
    "element-plus": "^1.2.0-beta.3",
    "vue": "^3.0.0",
    "vue-axios": "^3.4.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0"
  }
}

3.重新配置baseurl

最终main.js文件内容如下

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import axios from 'axios';
import VueAxios from 'vue-axios';
// 获取构建环境
const env = process.env.NODE_ENV;
// 根据不同的环境，配置不同的baseURL,生产环境直接配置生成环境的地址
const baseUrl = (env === 'development' ? '/api' : 'http://localhost:1288')
export const request = axios.create({
  baseURL: baseUrl
})

const app = createApp(App)
app.config.globalProperties.$http = request
app.use(ElementPlus)
app.use(VueAxios, request);
app.use(store)
app.use(router)
app.mount('#app')