vue项目管理

1. 端口

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 13500 // 替换为您希望使用的端口号
  }
})

2. 代理

// vue.config.js
module.exports = defineConfig({
  devServer: {
    port: 13500,
    proxy: {
      '/api': {
        target: 'http://api.example.com', // 代理目标的基础URL
        changeOrigin: true, // 是否改变请求头中的Origin字段
        pathRewrite: {
          '^/api': '', // 将请求路径中的/api替换为空字符串
        },
      },
    },
  }
})

3. 路由

1. 页面目录结构

└─views
    │  HomeView.vue
    │
    └─manage
            vue-01.vue
            vue-02.vue

2. 路由

// src/router/index.js
import {createRouter, createWebHistory} from 'vue-router';

// views下的每个页面作为组件导入
import Vue01 from '../views/manage/vue-01'
import Vue02 from '../views/manage/vue-02'
import HomeView from '../views/HomeView'

// 定义路由规则
const routes = [
    {
        path: '/',
        component: HomeView,
    },
    {
        path: '/vue-01',
        component: Vue01,
    },
    {
        path: '/vue-02',
        component: Vue02,
    },
];

// 创建路由对象
const router = createRouter({
    // 使用历史模式
    history: createWebHistory(process.env.BASE_URL),
    routes: routes
})

// 导出 
export default router;

3. 使用路由

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router';

const app = createApp(App)

app.use(router)
app.mount('#app')

4. 模式与环境变量

模式

Vue Cli: 模式

环境变量

Vue Cli: 环境变量
在dev模式下，.env.development会覆盖.env里相同的属性。
使用构建命令：vue-cli-service build --mode [mode]来选择构建的环境