项目配置策略
基础配置:指定应用上下文、端口号,vue.config.js
修改后需要重启
const port = 7070;
module.exports = {
publicPath: '/practice', // 部署应⽤包时的基本 URL
devServer: {
port,
}
}
配置webpack:configureWebpack
我们在项目过程中主要也是与wepack打交道,所配置的选项都会与原有的进行合并
webpack-merge 合并出终选项
对象形式配置:不是特别的动态
范例:设置⼀个组件存放路径的别名,vue.config.js
const path=require('path')
module.exports = {
configureWebpack: {
resolve: {
alias: {
comps: path.join(__dirname, 'src/components'),
}
}
}
}
我们还可以把webpack内的配置拿到我们的模板中去使用
module.exports = {
configureWebpack: {
name: "vue项⽬实践"
}
};
之后在宿主⻚⾯使⽤lodash插值语法使⽤它,./public/index.html
<title><%= webpackConfig.name %></title>
函数形式配置:可以动态灵活的根据环境变量进行改变
// 传递⼀个函数给configureWebpack
// 可以直接修改,或返回⼀个⽤于合并的配置对象
configureWebpack: config => {
config.resolve.alias.comps = path.join(__dirname, 'src/components')
// 访问环境变量
if (process.env.NODE_ENV === 'development') {
config.name = 'vue项⽬实践'
} else {
config.name = 'Vue Practice'
}
}
配置webpack:chainWebpack
webpack-chain被称为链式操作,可以更细粒度控制webpack内部配置
范例:引入一个svg 图标
可以通过 vue inspect > output.json 去输出所有的webpack配置
也可以通过 vue inspect --rules 去看我们所需要的规则
- 下载图标:存⼊src/icons/svg中
- 安装依赖:svg-sprite-loader
npm i svg-sprite-loader -D
- 修改规则和新增规则,vue.config.js
// 获得绝对路径
function resolve(dir) {
return path.join(__dirname, dir)
}
chainWebpack(config) {
// 从项目默认svg加载rule中排除掉./src/icons目录
config.module.rule('svg')
.exclude.add(resolve('/src/icons'))
// svg-loader配置
config.module.rule('icons')
.test(/\.svg$/)
.include.add(resolve('/src/icons')).end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({ symbolId: 'icon-[name]' })
}
- 使⽤图标:App.vue
<template>
<svg>
<use xlink:href="#icon-wx" />
</svg>
</template>
<script>
import '@/icons/svg/wx.svg'
</script>
- ⾃动导⼊
- 创建icons/index.js
// 自动化加载svg目录下的所有svg文件 // 使用webpack提供的require.context()指定svg为固定上下文 const req = require.context('./svg', false, /\.svg$/) // keys()返回的是上下文中的所有文件名 req.keys().map(req)
- 创建SvgIcon组件,components/SvgIcon.vue,这时可以在icons/index.js中引入该组件并挂载至Vue实例
这时调用起来就可以这样了<template> <svg :class="svgClass" v-on="$listeners"> <use :xlink:href="iconName" /> </svg> </template> <script> export default { name: 'SvgIcon', props: { iconClass: { type: String, required: true }, className: { type: String, default: '' } }, computed: { iconName() { return `#icon-${this.iconClass}` }, svgClass() { if (this.className) { return 'svg-icon ' + this.className } else { return 'svg-icon' } } } } </script> <style scoped> .svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>
<svg-icon icon-class="wx"></svg-icon>
环境变量和模式
如果想给多种环境做不同配置,可以利⽤vue-cli提供的模式。默认有development、production、test三种模式,它们的配置⽂件形式是 .env.development 这种。
定义⼀个开发时可⽤的配置项,创建.env.dev
# 只能⽤于服务端
foo=bar
# 可⽤于客户端
VUE_APP_DONG=dong
修改mode选项覆盖模式名称,package.json
"serve": "vue-cli-service serve --mode dev"