使用vue图形化管理工具
vue ui
使用Nprogress
使用Nprogress
npm install --save nprogress
使用依赖
在请求拦截器中显示进度条 Nprogress.start()
在响应拦截器中隐藏进度条 Nprogress.done();
/src/utils/request.js
//引入依赖 import Nprogress from "nprogress"; import "nprogress/nprogress.css"; instance.interceptors.request.use( function (config) { //显示进度条 Nprogress.start(); ... }, function (error) { // 对请求错误做些什么 return Promise.reject(error); } ); // 添加响应拦截器 instance.interceptors.response.use( function (response) { //隐藏进度条 Nprogress.done(); ... }, function (error) { // 超出 2xx 范围的状态码都会触发该函数。 // 对响应错误做点什么 return Promise.reject(error); } );
vscode格式化不换行
/.prettierrc
{
"semi":false,
"singleQuote":true,
"printWidth":200
}
批量移除console.log
安装依赖: npm i babel-plugin-transform-remove-console --save-dev
使用插件:
babel.config.js
const proPlugins = [];
//如果是开发环境,则添加 transform-remove-console 插件
if (process.env.NODE_DEV == "production") {
proPlugins.push("transform-remove-console");
}
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [...proPlugins],
};
生成打包报告
//通过 vue-cli 的命令选项可以生成打包报告
// --report 选项可以生成 report.html 以帮助分析包内容
vue-cli-service build --report
ElementUI组件按需加载
在main-prod.js中,注释掉element-ui按需加载的代码
在index.html的头部区域中,通过CDN加载element-ui的js和css样式
修改打包入口文件
vue.config.js文件,用来修改webpack的配置项
configureWebpack和chainWebpack,来自定义webpack的打包配置
configureWebpack和chainWebpack的作用完全相同
configureWebpack:通过操作对象的形式来修改入口文件
chainWebpack:通过链式编程的形式来修改入口文件
/vue.config.js
module.exports={
chainWebpack: (config) => {
config.when(process.env.NODE_ENV === "production", (config) => {
config.entry("app").clear().add("./src/main-prod.js");
});
config.when(process.env.NODE_ENV === "development", (config) => {
config.entry("app").clear().add("./src/main-dev.js");
});
},
}
修改index.html文件
设置变量isProd
在开发环境下,通过import来引入依赖。
在生产环境下,不使用import引入依赖,而是通过cdn来引入各种依赖,这样可以减小打包后依赖的体积。
/vue.config.js
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
chainWebpack: (config) => {
//生产模式
config.when(process.env.NODE_ENV == "production", (config) => {
config.entry("app").clear().add("./src/main-prod.js");
//设置一个全局变量,在index.html中用来区分生产环境和开发环境
config.plugin("html").tap((args) => {
args[0].isProd = true;
return args;
});
});
//开发模式
config.when(process.env.NODE_ENV == "development", (config) => {
config.entry("app").clear().add("./src/main-dev.js");
config.plugin("html").tap((args) => {
args[0].isProd = false;
return args;
});
});
},
});
使用变量isProd
通过isProd区分开发环境和生产环境。如果是生产环境,则加载CDN。如果是开发环境,则不接在CDN文件。
/public/index.html
<% if(htmlWebpackPlugin.options.isProd){%>
<link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/theme-chalk/index.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/index.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.cjs.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.2/esm/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.1.6/vue-router.global.prod.min.js"></script>
<% } %>
第三方依赖启用CDN
/vue.config.js
module.exports={
chainWebpack: (config) => {
config.when(process.env.NODE_ENV == "production", (config) => {
config.entry("app").clear().add("./src/main-prod.js");
//使用外部资源文件
config.set("externals", {
vue: "vue",
"vue-router": "VueRouter",
axios: "axios",
lodash: "_",
echarts: "echarts",
nprogress: "NProgress",
"vue-quill-editor": "VueQuillEditor"
});
});
config.when(process.env.NODE_ENV == "development", (config) => {
config.entry("app").clear().add("./src/main-dev.js");
});
},
}
cdn链接
<link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.12/theme-chalk/index.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.cjs.js">i</script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.2/esm/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.1.6/vue-router.global.prod.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.12/index.min.js"></script>
路由懒加载
当打包创建项目时候,js包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
具体需要三步:
安装 @babel/plugin-syntax-dynamic-import包
在babel.config.js配置文件中声明该插件
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [...proPlugin,'@babel/plugin-syntax-dynamic-import'],
}
将路由改为按需加载的形式,示例代码如下:
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
开启gzip压缩
使用gzip减少文件体积,使传输速度更快
可以通过服务器端使用express做gzip压缩,其配置如下:
服务器端安装包 npm i compression -D
导入包 const compression=require("compression");
启用中间件 app.use(compression())
/app.js
const express=require("express")
const compression=require("compression")
const app=express()
app.use(compression()) //这个在前
app.use(express.static('./dist')) //这个在后
app.listen(80,()=>{
console.log("正在运行3000")
})
1.打包 npm run build,生成dist文件
宝塔后台添加站点
![](https://img-blog.csdnimg.cn/img_convert/2bc19ac42637064adbdac0e2a69e64bf.png)
3.上传文件到FTP
![](https://img-blog.csdnimg.cn/img_convert/bb7c008d291b46820ec459f862108744.png)
4.修改nginx配置文件
![](https://img-blog.csdnimg.cn/img_convert/3789b5c12698160d11c8f886ca3fca3a.png)
location /api { # 会将接口地址/api开头的全部替换文下边配置的地址
proxy_pass https://www.thenewstep.cn/v1/vue3system/api; #接口服务地址
}