在开发中,可以通过vue.config.js进行修改vue中webpack配置。
1、vue.config.js有三种配置方式:
-
方式一:直接通过CLI提供给我们的选项来配置:
-
比如publicPath:配置应用程序部署的子目录(默认是
/
,相当于部署在https://www.my-app.com/
); -
比如outputDir:修改输出的文件夹;
-
-
方式二:通过configureWebpack修改webpack的配置:
-
可以是一个对象,直接会被合并;
-
可以是一个函数,会接收一个config,可以通过config来修改配置;
-
-
方式三:通过chainWebpack修改webpack的配置:
-
是一个函数,会接收一个基于 webpack-chain 的config对象,可以对配置进行修改;
-
const { defineConfig } = require('@vue/cli-service')
const path = require('path')
const { config } = require('process')
module.exports = defineConfig({
transpileDependencies: true,
// 1.配置方式一:CLI提供的属性
outputDir: './build',
// 2.配置方式二:和webpack属性完全一致,最后会进行合并
configureWebpack: {
resolve: {
alias: {
components: '@/components'
}
}
}
configureWebpack: (config) => {
config.resolve.alias = {
'@': path.resolve(__dirname, 'src'),
components: '@/components'
}
}
// 3.配置方式三:
chainWebpack: (config) => {
config.resolve.alias
.set('@', path.resolve(__dirname, 'src'))
.set('components', '@/components')
}
})
配置时出现的eslint报错警告
在配置时,可能会出现eslint报错
解决方法:修改.eslintrc.js中的rules。
比如上述 config 报错,可将报错提示中的'@typescript-eslint/no-unused-vars'复制下来。在.eslintrc.js中的rules中将该规则设置为off
2、vue-router集成
安装vue-router的最新版本:
npm install vue-router
创建router对象:src/router/index.ts
import { createRouter, createWebHashHistory } from 'vue-router'
import { RouteRecordRaw } from 'vue-router'
const routes: RouteRecordRaw[] = [
{
path: '/',
redirect: '/main'
},
{
path: '/main',
component: () => import('../views/main/main.vue')
},
{
path: '/login',
component: () => import('../views/login/login.vue')
}
]
const router = createRouter({
routes,
history: createWebHashHistory()
})
export default router
安装router:main.ts
import router from './router'
createApp(App).use(router).mount('#app')
在App.vue中配置跳转:
<template>
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/main">首页</router-link>
<router-view></router-view>
</div>
</template>
3、vuex集成
安装vuex:
npm install vuex
创建store对象:src/store/index.ts
import { createStore } from 'vuex'
const store = createStore({
state() {
return {
name: 'coderwhy'
}
}
})
export default store
安装store: main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(router).use(store).mount('#app')
console.log('哈哈哈fdasfdasf')
在App.vue中使用:
<h2>{
{ $store.state.name }}</h2>