前言
vue.config.js 是一个用于 Vue 项目的配置文件，用于自定义项目的构建配置。在这个文件中，你可以修改 webpack 相关的选项，以满足你的项目需求。
webpack当前版本 @5.88.2
在你的项目根目录下，找到或创建一个名为 vue.config.js 的文件，根据以下内容进行修改:
配置静态资源访问路径
module.exports = {
// 静态资源访问路径，默认 '/'
publicPath: './'
}
配置输出目录
module.exports = {
// 指定构建后的输出目录，默认 'dist'
outputDir: 'dist'
}
配置开发服务器启动时是否自动打开和端口号
module.exports = {
// 配置开发服务器选项
devServer: {
// 开发服务器启动时是否自动打开浏览器
open: true,
// 端口号
port: 3000
},
}
自定义 webpack 配置：
module.exports = {
// webpack 的配置对象
configureWebpack: {
// 在这里添加或修改 webpack 的配置
},
}
配置路径别名alias
找到 src/assets 文件夹，新建 images、scripts、styles 文件夹
将 src/assets 文件夹中 logo.png 文件放入 images 文件夹
在 vue.config.js 配置中中添加以下两部分代码：
const path = require('path')
configureWebpack: {
// 配置Webpack模块解析的方式，使得你可以通过模块名字而不是相对路径来引入模块
resolve: {
// 设置路径别名
alias: {
'@': path.resolve('src'),
'@public': path.resolve('public'),
'@img': path.resolve('src/assets/images'),
'@js': path.resolve('src/assets/scripts'),
'@css': path.resolve('src/assets/styles')
}
}
}
上述代码使用 Node.js 的 path 模块来处理文件路径。__dirname 表示当前文件所在的目录。
在 resolve.alias 下添加你需要的路径别名。例如，'@' 被配置为指向 src 目录，表示你可以使用 @ 作为 src 目录的别名。
配置文件改动后需要重新启动开发服务器，这样才能让修改生效。
现在，你可以在你的 Vue 项目中使用路径别名了。例如，你可以使用 @img 来引用 src/assets/images 目录下的图片。
1.找到 src/App.vue
2.将logo图片路径改为以下内容后：
3.将组件引入路径改为以下内容：
import HelloWorld from '@/components/HelloWorld.vue'
查看效果。
vue.config.js 修改完成后的文件内容如下：
const path = require('path')
module.exports = {
// 静态资源访问路径
publicPath: './',
// 指定构建后的输出目录，默认是 'dist'
outputDir: 'dist',
// 配置开发服务器选项
devServer: {
// 开发服务器启动时是否自动打开浏览器
open: true,
// 端口号
port: 3000
},
// webpack 的配置对象
configureWebpack: {
// 配置Webpack模块解析的方式，使得你可以通过模块名字而不是相对路径来引入模块
resolve: {
// 设置路径别名
alias: {
'@': path.resolve('src'),
'@public': path.resolve('public'),
'@img': path.resolve('src/assets/images'),
'@js': path.resolve('src/assets/scripts'),
'@css': path.resolve('src/assets/styles')
}
}
}
}
还可以使用其它的选项来自定义构建行为，具体可以参考 Vue CLI 官方文档中的 vue.config.js 配置参考。
框架搭建整体流程
第一步 Vue2 使用 Vue 脚手架 Vue CLI 搭建一个 Vue.js 前端项目框架
第二步 Vue2 vue.config.js 基础配置，路径别名alias
第三步 Vue2 vue.config.js 集成 Less 配置 sourceMap+全局变量
第四步 Vue2 配置ESLint
第五步 Vue2 vue.config.js 使用image-minimizer-webpack-plugin配置图片压缩
第六步 Vue2 集成全家桶 vue-router vuex axios 和 element-ui
第七步 Webpack 配置多环境和全局变量 cross-env 和 webpack.DefinePlugin
点击下载步骤 1-7 配置完成的完整 Demo