vue-cli 3.0 配置
最近上手试了试vue-cli(v3.0.0-rc.5)，小结一下1.环境变量相关在一般项目中我们针对不同的开发环境会配置不同的环境变量：开发环境（development）测试环境(production)发布环境（release）1.在项目根目录下新建三个文件：.env.development，.env.production，.env.release//.env.de...
·
1. 环境变量相关
在一般项目中我们针对不同的开发环境会配置不同的环境变量：
- 开发环境（development）
- 测试环境(production)
- 发布环境（release）
1.在项目根目录下新建三个文件：.env.development，.env.production，.env.release
//.env.development
NODE_ENV=development
VUE_APP_XXX=XXX
...
//.env.production
NODE_ENV=production
VUE_APP_XXX=XXX
outputDir=dist
//.env.release
NODE_ENV=production
VUE_APP_XXX=XXX
outputDir=release
2.vue.config.js配置
module.exports={
...
outputDir: process.env.outputDir,
...
}
3.package.json配置
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --mode production",
"release": "vue-cli-service build --mode release",
"lint": "vue-cli-service lint"
},
4.打包命令
- 打包测试版本：
npm run build - 打包正式版本：
npm run release
打包好的文件分别放在dist/release中
2. 项目中配置目录别名alias
修改vue.config.js
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
module.exports={
...
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
},
...
}
3. webpack代理配置相关
修改vue.config.js
module.exports={
...
// 代理相关配置
devServer: {
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: null, // string | Object
},
...
}
4. 打包文件优化
1.安装插件
terser-webpack-plugin// 去console插件compression-webpack-plugin// gzip压缩插件
npm install --save-dev terser-webpack-plugin compression-webpack-plugin
2.vue.config.js配置
const TerserPlugin = require('terser-webpack-plugin')// 去console插件
const CompressionWebpackPlugin = require('compression-webpack-plugin')// gzip压缩插件
module.exports={
...
// webpack插件配置
configureWebpack: config => {
const plugins = [
// 去console
new TerserPlugin({
terserOptions: {
warnings: false,
compress: {
drop_debugger: true,
drop_console: true,
},
},
sourceMap: false,
parallel: true,
}),
// gzip压缩
new CompressionWebpackPlugin({
filename: '[path][base].gz',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
['js', 'css'].join('|') +
')$',
),
threshold: 10240,
minRatio: 0.8,
}),
]
if (process.env.NODE_ENV === 'production') {
config.plugins = [...config.plugins, ...plugins]
}
},
...
}
5. vue.config.js完整默认配置
可直接拷贝到自己项目中自定义修改
module.exports = {
// 基本路径
publicPath: '/',
// 输出文件目录
outputDir: 'dist',
// 用于嵌套生成的静态资产（js，css，img，fonts）的目录
assetsDir: '',
// 指定生成的 index.html 的输出路径 (相对于 outputDir)
indexPath: 'index.html',
// 静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
filenameHashing: true,
// 以多页模式构建应用程序。
pages: undefined,
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// 是否使用包含运行时编译器的Vue核心的构建
runtimeCompiler: false,
// 默认情况下babel-loader忽略其中的所有文件node_modules
transpileDependencies: [],
// 生产环境sourceMap
productionSourceMap: true,
// 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性
crossorigin: undefined,
// 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)
integrity: false,
// webpack配置
configureWebpack: () => {},
chainWebpack: () => {},
// css相关配置
css: {
// 启用 CSS modules
modules: false,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
},
// webpack-dev-server 相关配置
devServer: {
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: null, // 设置代理
before: app => {}
},
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
// PWA 插件相关配置
pwa: {},
// 第三方插件配置
pluginOptions: {
// ...
}
}
6. mock访问本地Json文件
可以将json文件放在项目根目录或public文件夹下
vue.config.js中配置如下
const appData = require('./public/data.json')
const seller = appData.seller
const goods = appData.goods
const ratings = appData.ratings
devServer: {
open: true, // 打开浏览器
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: null, // 设置代理
before: app => {
app.get('/api/seller', (req, res) => {
res.json({
status: 1,
data: seller
})
})
app.get('/api/goods', (req, res) => {
res.json({
status: 1,
data: goods
})
})
app.get('/api/ratings', (req, res) => {
res.json({
status: 1,
data: ratings
})
})
}
},
7. CDN配置
在开发中我们可以将公共库采用CDN引入的方式减少包体积。
修改vue.config.js文件
module.exports={
...
chainWebpack: config => {
// externals配置
const externals = {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios',
moment: 'moment'
}
config.externals(externals)
// cdn配置
const cdnUrl = 'https://cdn.jsdelivr.net/npm/'
const cdn = {
// 开发环境
dev: {
css: [],
js: [
// babel-polyfill
`${cdnUrl}babel-polyfill@6.26.0/dist/polyfill.js`,
// vue
`${cdnUrl}vue@2.6.12/dist/vue.js`,
// vue-router
`${cdnUrl}vue-router@3.4.6/dist/vue-router.js`,
// vuex
`${cdnUrl}vuex@3.5.1/dist/vuex.js`,
// axios
`${cdnUrl}axios@0.20.0/dist/axios.js`,
// moment
`${cdnUrl}moment@2.29.1/moment.js`,
`${cdnUrl}moment@2.29.1/locale/zh-cn.js`
]
},
// 生产环境
build: {
css: [],
js: [
// babel-polyfill
`${cdnUrl}babel-polyfill@6.26.0/dist/polyfill.min.js`,
// vue
`${cdnUrl}vue@2.6.12/dist/vue.min.js`,
// vue-router
`${cdnUrl}vue-router@3.4.6/dist/vue-router.min.js`,
// vuex
`${cdnUrl}vuex@3.5.1/dist/vuex.min.js`,
// axios
`${cdnUrl}axios@0.20.0/dist/axios.min.js`,
// moment
`${cdnUrl}moment@2.29.1/moment.min.js`,
`${cdnUrl}moment@2.29.1/locale/zh-cn.min.js`
]
}
}
config.plugin('html').tap(args => {
if (process.env.NODE_ENV === 'production') {
args[0].cdn = cdn.build
}
if (process.env.NODE_ENV === 'development') {
args[0].cdn = cdn.dev
}
return args
})
},
...
}
修改public下index.html
<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">
<% } %>
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script">
<% } %>
</head>
<body>
...
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</body>
以上CDN使用的是jsDeliver的CDN
需要注意的是本地开发环境中使用的版本与正式环境的版本需要保持一致，可以查看package.json和yarn.lock中对应的版本号
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献19条内容
所有评论(0)