VUE3.0项目配置

mac2024-04-17 41

1、项目结构

┌─dist 生产打包输出目录 ├─node_modules 模块依赖包 ├─public 静态html和网站图标 ├─src │ ┌─assets 静态资源，图标字体、图片、样式表 │ ├─components 公共组件 │ ├─plugins 插件 │ ├─utils 公共js方法 │ ├─views 视图组件 │ ├─login 登录注册 │ ├─orderManage 订单管理 │ ├─App.vue 根组件 │ ├─main.js vue入口文件 │ ├─router.js 路由管理 │ └─store.js vuex状态管理 ├─test 测试打包输出目录 ├─.env 环境变量配置 ├─.env.development 开发(测试)模式环境变量 ├─.env.production 生产模式环境变量 └─vue.config.js 配置文件

2、全局配置

vue.config.js

const path=require('path') function resolve(dir){ return path.join(__dirname,dir) } const projectName=require('./package.json').name module.exports={ // 如果部署项目时不是根目录，请参照官网修改publicPath值 // https://cli.vuejs.org/zh/config/#publicpath publicPath:'./', //根目录 outputDir:process.env.outputDir, //输出目录 lintOnSave:false, //是否开启 eslint 保存检测，有效值:true||false||'error' productionSourceMap:false, // 是否为生产环境构建生成 source map css:{ sourceMap:false, //是否开启 CSS source map modules:false, //为所有的 CSS 及其预处理文件开启 CSS Modules,不会影响 `*.vue` 文件 loaderOptions:{ //预处理器的 loader 传递自定义选项 sass:{ // 全局引入index.scss文件 data:`@import "~styles/basic.scss";` } } }, devServer: { open:true, // 编译完成是否自动打开浏览器预览 proxy: { // 配置多个接口代理 '/other': { target:process.env.VUE_APP_AA, changeOrigin: true, ws: true, pathRewrite: { '^/aa': '' } }, '/mall': { target:process.env.VUE_APP_BB, changeOrigin: true, ws: true, pathRewrite: { '^/bb': '' } }, '/design': { target:process.env.VUE_APP_CC, changeOrigin: true, ws: true, pathRewrite: { '^/cc': '' } } } }, configureWebpack:{ name:projectName, resolve:{ alias:{ '@':resolve('src'), 'styles':resolve('src/assets/style'), 'imgs':resolve('src/assets/img') } } } }

3、环境变量

3.1、备用环境，当其他两个配置出错会使用该配置

.env

VUE_APP_OTHER="https://aa.url.com:8000" VUE_APP_MALL="https://bb.url.com:8001" VUE_APP_DESIGN="https://cc.url.com:8002" outputDir="dist"

3.2、开发（本地）环境

.env.development

VUE_APP_OTHER="http://192.168.0.1:8080/aa" VUE_APP_MALL="http://192.168.0.1:8080/bb" VUE_APP_DESIGN="http://192.168.0.1:8080/cc" outputDir="test" NODE_ENV="development"

4.3、生产（线上）环境

.env.production

VUE_APP_OTHER="https://aa.url.com:8000" VUE_APP_MALL="https://bb.url.com:8001" VUE_APP_DESIGN="https://cc.url.com:8002" outputDir="dist" NODE_ENV="production"

5、配置运行命令

package.json 修改此文件中的如下内容

"private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test": "vue-cli-service build --mode development", "lint": "vue-cli-service lint" }

cmd 中打开文件根目录,输入命令运行

npm install npm run serve // 本地运行 npm run build // 生产打包 npm run test // 测试打包 npm run lint

6、根组件

App.vue

<template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { name: 'app' } </script> <style> </style>

7、主入口

main.js

import Vue from 'vue' import './plugins/axios' import App from './App.vue' import router from './router' import store from './store' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'; import 'styles/reset.css' import '@/assets/iconfont/iconfont.css' Vue.use(ElementUI) // 全局守卫判断用户是否登录,如果未登录只能进入登录和注册组件，其他组件重定向到登录组件 router.beforeEach((to,from,next)=>{ if(!sessionStorage.getItem('userInfo')){ // 未登录 if(to.path=='/page1' || to.path=='/page2' || to.path=='/page3'){ next(); }else{ next('/login'); } }else{ // 已登录 if(to.path=='/page1' || to.path=='/page2' || to.path=='/page3'){ next('/'); }else{ next(); } } }) Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app')

8、路由

router.js

import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ mode: 'hash', routes: [ { path:'/', name:'home', component:()=>import('./views/Home'), redirect:'/orderList', children:[ { path:'/orderList', //列表 name:'orderList', component:()=>import('./views/orderManage/OrderList') }, { path:'/orderDetail', //详情 name:'orderDetail', component:()=>import('./views/orderManage/OrderDetail') } ] },{ path: '/login', //登录 name: 'login', component: ()=>import('./views/login/Login') },{ path: '/register', //注册 name: 'register', component: () => import('./views/login/Register') //懒加载 },{ path:'/revisePswd', //忘记密码 name:'revisePswd', component:()=>import('./views/login/RevisePswd') },{ path:'*', //错误重定向 redirect:'/' } ] })

9、状态管理 vuex

store.js

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { dialogVisible:false // 弹框状态 }, mutations: { set_dialogVisible(state,val){ //设置弹框状态 state.dialogVisible=val; } }, actions: { } })

vuex 在组件中使用

最新回复(0)