12. vue.config.js
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。
这个文件应该导出一个包含了选项的对象：
常用配置
const {
defineConfig } = require('@vue/cli-service')
// alias 中使用
const path = require('path');
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = defineConfig({
// 部署应用包时的基本 URL。
publicPath: "/",
// 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录的内容在构建之前会被清除
outputDir: "dist",
// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
assetsDir: "",
// 指定生成的 index.html 的输出路径 (相对于 outputDir)。
indexPath: 'index.html',
// 设置为 true 或 'warning' 时，eslint-loader 会将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令行，且不会使得编译失败。
lintOnSave: 'default',
// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
productionSourceMap: "false",
// 文件hash
filenameHashing: true,
// ( 注意看清楚这里 ) 如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。 使用proxy
devServer: {
port: 8080, // 端口
host: "localhost", // 域名
https: false, // 是否开启https
open: true, // 是否在开启服务器后自动打开浏览器访问该服务器
// 这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求)
proxy: {
// 只要请求中带有/api的url,就会经过这里请求
'/api': {
// //目标请求地址
target: 'http://ximingx.com',
ws: true,
// true为可以跨域
changeOrigin: true
}
}
},
// 在这里对 webpack 进行设置
configureWebpack: {
resolve: {
alias: {
// 配置别名
'@': resolve('src'),
'components': resolve('@/components'),
'views': resolve('@/views'),
'assets': resolve('@/assets'),
}
}
},
})
cdn加载资源
Vue项目打包的时候，默认会把所有代码合并生产新文件,其中包括各种库导致打包出来很大。如果使用cdn的话,会更利于程序的加载速度。
**在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。**若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。
将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的。
外部的库文件，可以使用CDN资源，或者别的服务器资源等。
- index.html
在项目根目录index.html使用cdn节点导入
<head>
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
<% } %>
</head>
<body>
<div id="app"></div>
<% for (let i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</body>
- vue.config.js
const CDN = {
css: [
'https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css',
'https://unpkg.com/browse/[email protected]/theme-chalk/index.css'
],
js: [
'https://cdn.bootcdn.net/ajax/libs/vue/3.2.6/vue.global.js',
'https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.11/vue-router.global.js',
'https://cdn.bootcdn.net/ajax/libs/vuex/4.0.2/vuex.global.js',
'https://cdn.bootcdn.net/ajax/libs/axios/0.21.4/axios.js',
'https://unpkg.com/[email protected]/dist/index.full.js',
'https://unpkg.com/browse/[email protected]/lib/locale/lang/zh-cn.js'
]
};
let objExternals = {
vue: 'Vue',
axios: 'axios',
vuex: 'Vuex',
'vue-router': 'VueRouter',
'element-plus': 'ElementPlus'
}
module.exports = {
publicPath: '/',
assetsDir: './assets',
chainWebpack: config => {
// 配置，将当前页定义的cdn值传到主页面（index.html）
config.plugin('html').tap(args => {
// 这里我是除本地环境，其余均使用CDN，可自己选择是否配置
args[0].cdn = process.env.VUE_APP_STAGE === 'LOCAL' ? {
} : CDN
return args;
});
},
configureWebpack: {
devServer: {
//...与本文无关
},
resolve: {
//...与本文无关
},
plugins: [
//...与本文无关
],
// 定义webpack打包配置
externals: process.env.VUE_APP_STAGE === 'LOCAL' ? {
} : objExternals
}
}
这里解释一下externals 配置选项的作用：
我们想引用一个库，但是又不想让webpack打包，并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用，那就可以通过配置externals。