vue配置启动项目自动打开浏览器

打开package.json找到启动命令npm run dev 跟npm run serve(这两种命令都可以) 后面增加 --open

Vue项目设置路径src目录别名为@

1. Vue2

编辑vue.config.js内容如下：

const { defineConfig } = require('@vue/cli-service')const path = require('path')
function resolve(dir) {return path.join(__dirname, dir)
}module.exports = defineConfig({transpileDependencies: true,lintOnSave:false,// 关闭Eslint语法检查configureWebpack: {resolve: {alias: {'@': resolve('src'),},},}, 
})

3. Vue3

编辑vite.config.ts内容如下：

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({plugins: [vue()],resolve: {alias: {"@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src}}
})

编辑tsconfig.json内容如下：

// tsconfig.json
{"compilerOptions": {"baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录"paths": { //路径映射，相对于baseUrl"@/*": ["src/*"] }}
}

Vue路由模块使用和封装模板

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'Vue.config.productionTip = falsenew Vue({router,render: h => h(App)
}).$mount('#app')

App.vue

<template><div id="app"><!--路由页面--><router-view/></div>
</template><script>
export default {name: 'App'}
</script>

/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
// 插件初始化
Vue.use(VueRouter)
// 创建路由对象
const router=new VueRouter({routes:[{path:'/find',component: () => import('@/views/Find.vue'),},{path:'/friend',component: () => import('@/views/Friend.vue'),},{path:'/my',component: () => import('@/views/My.vue'),}]
})export default router