vue-cli3.0脚手架搭建、解决跨域、打包、优化、项目压缩一条龙
vue-cli3.0脚手架搭建、解决跨域、打包、优化、项目压缩
- 1、升级电脑上vue-cli到3.0以上版本
- 2、之后开始创建项目
- 项目目录是这样的
- 这里还要手动加上四个文件
- 3、添加必要得依赖这里用到的依赖有
- 4、vue.config.js添加配置项及项目得优化
- 5、index.html中改成
- 6、新建shujudata文件夹，在文件中新建https.js文件 （用来封装axios）
这只是但入口，除此之外还有多入口的配置请移步这里
1、升级电脑上vue-cli到3.0以上版本
升级vue-cli后不用担心之前得项目运行不了，它是支持以前得项目得
2、之后开始创建项目
项目目录是这样的
这里还要手动加上四个文件
在.env.development文件中加入
VUE_APP_API ='我是测试接口'
在.env.production文件中加入
VUE_APP_API ='我是生产接口'
目的是为了打包的时候打出不同IP的包
3、添加必要得依赖这里用到的依赖有
//less引入与sass引入方法不一样(需要这两个插件)
cnpm i style-resources-loader vue-cli-plugin-style-resources-loader -D
//引入jquery
cnpm install jQuery -- save
//引入 axios
cnpm install axios --save
//zip压缩
cnpm install compression-webpack-plugin --save-dev
//压缩图片
cnpm install image-webpack-loader -D
4、vue.config.js添加配置项及项目得优化
const path = require('path');
const webpack = require('webpack')
// gzip压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development'
// 是使用cdn
const needCdn = false
// 是否压缩文件
const isZip = false
// cdn链接
const cdn = {
// cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
externals: {
vue: 'Vue',
vuex: 'Vuex',
},
// cdn的css链接
css: [],
// cdn的js链接
js: [
'https://cdn.staticfile.org/vue/2.6.10/vue.min.js',
'https://cdn.staticfile.org/vuex/3.0.1/vuex.min.js',
]
}
module.exports = {
// 公共路径
publicPath: './',
// 不同的环境打不同包名
outputDir: process.env.NODE_ENV === "development" ? 'devdist' : 'dist',
// 一次配置，全局使用，这个scss 因为每个文件都要引入
css: { // 一次配置，全局使用，这个scss 因为每个文件都要引入
loaderOptions: {
//引入sass时用到
sass: {
// data: `@import "./src/assets/hotcss/px2rem.scss";`
}
}
},
//此处引入第三方插件
pluginOptions: {
/**
* 引入style-resources-loader插件
* less引入与sass引入方法不一样
* 需要style-resources-loader 和 vue-cli-plugin-style-resources-loader两个插件才能引入成功
* 注意这里引入less文件时不能用别名引入
*/
'style-resources-loader': {
preProcessor: 'less',
patterns: [
path.resolve(__dirname, './src/assets/public.less'),
],
},
},
//打包时是否产生map文件
productionSourceMap: false,
//对内部的 webpack 配置进行更细致的修改
chainWebpack: config => {
//在路由中用懒加载时，webpack默认有预加载此设置是关闭预加载
config.plugins.delete('preload')
config.plugins.delete('prefetch')
//压缩图片
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({ bypassOnDebug: true })
.end()
// 设置别名
config.resolve.alias
.set('@', path.resolve(__dirname, './src'))
.set('@V', path.resolve(__dirname, './src/views'))
.set('@I', path.resolve(__dirname, './src/assets/image'))
.set('@F', path.resolve(__dirname, './src/shujudata/public.js'))
.set('@H', path.resolve(__dirname, './src/shujudata/https.js'))
.set('@R', path.resolve(__dirname, './src/router'))
.set('@S', path.resolve(__dirname, './src/store'))
.set('@C', path.resolve(__dirname, './src/components/comm'))
.set('@U', path.resolve(__dirname, './src/shujudata/severUrl.js'))
// 生产环境或本地需要cdn时，才注入cdn
config.plugin('html').tap(args => {
if (needCdn) args[0].cdn = cdn
return args
})
},
// 关闭eslint
lintOnSave: false,
// 配置服务器(开发环前端解决跨域：此项目没有用到服务代理)
devServer: {
proxy: {
'/api': {
target: 'http://www.baidu.com',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
},
// 覆盖webpack默认配置的都在这里
configureWebpack: config => {
//引入jQuery
config.plugins.push(
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery"
})
)
// 用cdn方式引入，则构建时要忽略相关资源
if (needCdn) config.externals = cdn.externals
// 生产环境相关配置
if (isProduction && isZip) {
// gzip压缩
const productionGzipExtensions = ['html', 'js', 'css']
config.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' + productionGzipExtensions.join('|') + ')$'
),
threshold: 1240, // 只有大小大于该值的资源会被处理 1240
minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
deleteOriginalAssets: false // 删除原文件
})
)
}
// 公共代码抽离(抽离公共代码后路由的懒加载将不起作用。如果要用懒加载则不添加一下代码)
config.optimization = {
splitChunks: {
cacheGroups: {
vendor: {
chunks: 'all',
test: /node_modules/,
name: 'vendor',
minChunks: 1,
maxInitialRequests: 5,
minSize: 0,
priority: 100
},
common: {
chunks: 'all',
test: /[\\/]src[\\/]js[\\/]/,
name: 'common',
minChunks: 2,
maxInitialRequests: 5,
minSize: 0,
priority: 60
},
styles: {
name: 'styles',
test: /\.(sa|sc|c)ss$/,
chunks: 'all',
enforce: true
},
runtimeChunk: {
name: 'manifest'
}
}
}
}
},
}
5、index.html中改成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>fav.ico">
<title>vue</title>
<!-- 使用CDN的CSS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
<% } %>
<!-- 使用CDN的CSS文件 -->
<style>
html,
body {
height: 100%;
}
</style>
</head>
<body>
<noscript>
<strong>We're sorry but shjzl4 doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
<!-- 使用CDN的JS文件 -->
</body>
/*有的电脑上有工商银行得安全插件，此插件会在浏览器得底部加上一个id叫ClCache得元素并带有高度
*这里是把这个元素隐藏掉
*/
<script type="text/javascript">
var num = 0
function getTime() {
num++
setTimeout(function () {
var dom = document.getElementById("ClCache")
if (dom !== null) {
dom.parentNode.style.cssText = 'display:none'
} else {
if (num < 120) {
getTime()
}
}
}, 1000)
}
getTime()
</script>
</html>
6、新建shujudata文件夹，在文件中新建https.js文件 （用来封装axios）
import axios from 'axios';
import qs from 'qs'; //引入axios数据处理 这里用npm install qs --save下载
// axios.defaults.timeout = 100000;
axios.defaults.baseURL = process.env.VUE_APP_API; //填写域名
/**
* http request 拦截器
*/
axios.interceptors.request.use(
config => {
config.data = {
...config.data,
token: userInfo.token,//每次请求都要加入token
}
config.data = qs.stringify(config.data);
//设置headers
config.headers = {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
return config;
},
error => {
return Promise.reject(err);
}
);
/**
* 响应拦截器即异常处理
*/
axios.interceptors.response.use(response => {
//token超时处理的动作
if (response.data.noToken == '0') {
}
return response
}, err => {
if (err && err.response) {
switch (err.response.status) {
case 400:
console.log('错误请求，错误代码：400')
break;
case 401:
console.log('未授权，请重新登录，错误代码：401')
break;
case 403:
console.log('拒绝访问，错误代码：403')
break;
case 404:
console.log('请求错误,未找到该资源，错误代码：404')
break;
case 405:
console.log('请求方法未允许，错误代码：405')
break;
case 408:
console.log('请求超时，错误代码：408')
break;
case 500:
console.log('服务器端出错，错误代码：500')
break;
case 501:
console.log('网络未实现，错误代码：501')
break;
case 502:
console.log('网络错误，错误代码：502')
break;
case 503:
console.log('服务不可用，错误代码：503')
break;
case 504:
console.log('网络超时，错误代码：504')
break;
case 505:
console.log('HTTP版本不支持该请求，错误代码：505')
break;
default:
console.log(`连接错误:${err.response.status}`)
}
if (err.response.status == 401) {
router.push('/')
}
} else {
console.log('连接到服务器失败')
}
//loading
return Promise.resolve(err.response)
})
export default {
/**
* 封装get方法
* @param url
* @param data
* @returns {Promise}
*/
get(url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
}).then(response => {
resolve(response);
}).catch(err => {
reject(err)
})
})
},
/**
* 封装post请求
* @param url
* @param data
* @returns {Promise}
*/
post(url, data) {
return new Promise((resolve, reject) => {
axios.post(url, data).then(response => {
resolve(response);
}, err => {
resolve(err)
})
})
},
}
在min.js中引入axios
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from '@S'
Vue.config.productionTip = false
//引入封装后的axios
import https from '@H';
Vue.prototype.$https = https;
console.log(process.env.VUE_APP_API)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
在package.json文件中配置
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build", //生产包npm run build
"devbuild": "vue-cli-service build --mode development"//测试包npm run devbuild
},
不同的打包命令会打出不同ip的包
最后用 npm run serve启动项目