做化学科普网站的目的,如何让网站火起来,wordpress caller_get_posts,四会城乡建设局网站代码下载 打包发布服务代码下载 项目优化 生成打包报告#xff0c;根据报告优化项目第三方库启用CDNElement-UI组件按需加载路由懒加载首页内容定制 添加进度条 给项目添加进度条效果#xff0c;先打开项目控制台#xff0c;打开依赖#xff0c;安装 nprogress 打开ma…代码下载 打包发布服务代码下载 项目优化 生成打包报告根据报告优化项目第三方库启用CDNElement-UI组件按需加载路由懒加载首页内容定制 添加进度条 给项目添加进度条效果先打开项目控制台打开依赖安装 nprogress 打开main.js编写如下代码 // 导入 NProgress import NProgress from nprogress import nprogress/nprogress.css// 请求拦截器请求在到达服务器之前先会调用use中的这个回调函数来添加请求头信息 axios.interceptors.request.use(function(config) {console.log(request: , config)NProgress.start()config.headers.Authorization window.sessionStorage.getItem(token)return config }) // 响应拦截器 axios.interceptors.response.use(function(res) {console.log(response: , res)NProgress.done()return res })根据报错修改代码 根据ESLint的警告提示更改对应的代码在.prettierrc文件中更改设置 printWidth:200, 将每行代码的文字数量更改为200 {semi:false,singleQuote:true,printWidth:200 }处理生产环境 console 日志 安装一个插件 babel-plugin-transform-remove-console 在项目 build 阶段移除所有的console信息打开项目控制台点击依赖-开发依赖输入 babel-plugin-transform-remove-console安装。打开babel.config.js编辑代码如下 // 发布阶段需要用到发 babel 插件 const prodPlugins [] if (process.env.NODE_ENV production) prodPlugins.push(transform-remove-console)module.exports {presets: [vue/cli-plugin-babel/preset],plugins: [[component,{libraryName: element-ui,styleLibraryName: theme-chalk}],// 发布产品时用到的插件数组...prodPlugins] }至此运行 build 打包得到的目标文件中确实没有 console 日志输出但是打包日志中依然有警告若想消除此条警告可以在 .eslintrc.js 文件的 rule 中添加 no-console: off // 没有控制台输出 此配置。 生成打包报告 命令行形式生成打包报告 vue-cli-service build --report在vue控制台生成打包报告点击“任务”“build”“运行”运行完毕之后就可以查看报告 修改webpack的默认配置 如果要配置webpack需要通过vue.config.js来配置。 1、为开发模式与发布模式指定不同的打包入口 默认情况下Vue项目的开发模式与发布模式共用同一个打包的入口文件即 src/main.js。为了将项目的开发过程与发布过程分离可以为两种模式各自指定打包的入口文件即 开发模式的入口文件为 src/main-dev.js发布模式的入口文件为 src/main-prod.js 在 vue.config.js 导出的配置对象中新增 configureWebpack 或 chainWebpack 节点来自定义 webpack 的打包配置。configureWebpack 和 chainWebpack 的作用相同唯一的区别就是它们修改 webpack 配置的方式不同 chainWebpack 通过链式编程的形式来修改默认的 webpack 配置configureWebpack 通过操作对象的形式来修改默认的 webpack 配置 两者具体的使用差异可参考这里。 重命名 main.js 为 main-dev.js并复制一份 main-dev.js 命名为 main-prod.js在 vue.config.js 中通过 chainWebpack 自定义打包入口 const { defineConfig } require(vue/cli-service) module.exports defineConfig({transpileDependencies: true,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)})} })通过 externals 加载外部 CDN 资源 默认情况下依赖项的所有第三方包都会被打包到 js/chunk-vendors.******.js 文件中导致该js文件过大。那么可以通过 externals 排除这些包使它们不被打包到 js/chunk-vendors.******.js 文件中在 vue.config.js 中的发布模式下添加如下代码 // externals 节点中的第三方依赖包都不会被打包config.set(externals, {vue: Vue,vue-router: VueRouter,axios: axios,lodash: _,echarts: echarts,nprogress: NProgress,vue-quill-editor: VueQuillEditor})同时需要在 public/index.html 文件的头部添加如下的 CDN 资源引用 !-- nprogress 样式表 --link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/nprogress0.2.0/nprogress.min.css!-- 富文本编辑器 样式表 --link hrefhttps://cdn.jsdelivr.net/npm/quill1.3.4/dist/quill.core.min.css relstylesheetlink hrefhttps://cdn.jsdelivr.net/npm/quill1.3.4/dist/quill.snow.min.css relstylesheetlink hrefhttps://cdn.jsdelivr.net/npm/quill1.3.4/dist/quill.bubble.min.css relstylesheet!-- element-ui 样式表 --link relstylesheet hrefhttps://unpkg.com/element-ui2.15.14/lib/theme-chalk/index.cssscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/scriptscript srchttps://cdn.jsdelivr.net/npm/vue-router3.6.5/scriptscript srchttps://cdn.jsdelivr.net/npm/axios1.7.2/dist/axios.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/lodash4.17.21/lodash.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/echarts5.5.0/dist/echarts.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/nprogress0.2.0/nprogress.min.js/script!-- Include the Quill library --script srchttps://cdn.quilljs.com/1.3.4/quill.min.js/script!-- Quill JS Vue --script srchttps://cdn.jsdelivr.net/npm/vue-quill-editor3.0.6/dist/vue-quill-editor.js/scriptscript srchttps://unpkg.com/element-ui2.15.14/lib/index.js/script并且还得再 main-prod.js 文件中删除或注销如下的 element-ui 按需加载 和 css 加载的代码 // 导入 element-ui // import ./plugins/element.js// 导入富文本编辑器 import VueQuillEditor from vue-quill-editor // import quill/dist/quill.core.css // import styles // import quill/dist/quill.snow.css // for snow theme // import quill/dist/quill.bubble.css // for bubble theme// 导入 NProgress import NProgress from nprogress // import nprogress/nprogress.css注意由于前面在 plugin/element 文件将 element-ui 中 Message 组件配置为 msg 属性了 Vue.prototype.$msg Message此时必须将其修改为 Vue.prototype.$message Message 并全局搜索 this.$msg 将其替换为 this.$message。 首页内容定制 开发环境的首页和发布环境的首页展示内容的形式有所不同。如开发环境中使用的是import加载第三方包而发布环境则是使用CDN那么首页也需根据环境不同来进行不同的实现可以通过插件的方式来定制首页内容首先打开vue.config.js编写代码如下 module.exports defineConfig({transpileDependencies: true,chainWebpack: config {// 发布模式config.when(process.env.NODE_ENV production, config {// 入口函数config.entry(app).clear().add(./src/main-prod.js)// externals 节点中的第三方依赖包都不会被打包config.set(externals, {vue: Vue,vue-router: VueRouter,axios: axios,lodash: _,echarts: echarts,nprogress: NProgress,vue-quill-editor: VueQuillEditor})// 使用插件添加参数isProdconfig.plugin(html).tap(arg {arg[0].isProd truereturn arg})})// 开发模式config.when(process.env.NODE_ENV development, config {config.entry(app).clear().add(./src/main-dev.js)// 使用插件添加参数isProdconfig.plugin(html).tap(arg {arg[0].isProd falsereturn arg})})} })然后在 public/index.html 中使用插件判断是否为发布环境并定制首页内容标题和CDN加载项 title% htmlWebpackPlugin.options.isProd ? : dev-%后台管理平台/title% if (htmlWebpackPlugin.options.isProd) { %!-- nprogress 样式表 --link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/nprogress0.2.0/nprogress.min.css!-- 富文本编辑器 样式表 --link hrefhttps://cdn.jsdelivr.net/npm/quill1.3.4/dist/quill.core.min.css relstylesheetlink hrefhttps://cdn.jsdelivr.net/npm/quill1.3.4/dist/quill.snow.min.css relstylesheetlink hrefhttps://cdn.jsdelivr.net/npm/quill1.3.4/dist/quill.bubble.min.css relstylesheet!-- element-ui 样式表 --link relstylesheet hrefhttps://unpkg.com/element-ui2.15.14/lib/theme-chalk/index.cssscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/scriptscript srchttps://cdn.jsdelivr.net/npm/vue-router3.6.5/scriptscript srchttps://cdn.jsdelivr.net/npm/axios1.7.2/dist/axios.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/lodash4.17.21/lodash.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/echarts5.5.0/dist/echarts.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/nprogress0.2.0/nprogress.min.js/script!-- Include the Quill library --script srchttps://cdn.quilljs.com/1.3.4/quill.min.js/script!-- Quill JS Vue --script srchttps://cdn.jsdelivr.net/npm/vue-quill-editor3.0.6/dist/vue-quill-editor.js/scriptscript srchttps://unpkg.com/element-ui2.15.14/lib/index.js/script% } %路由懒加载 当打包构建项目时JavaScript 包会变得非常大影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块然后当路由被访问的时候才加载对应组件这样就更加高效了。具体需要 3 步 1、安装 babel/plugin-syntax-dynamic-import 包。打开vue控制台点击依赖-安装依赖-开发依赖-搜索babel/plugin-syntax-dynamic-import 点击安装。 2、在 babel.config.js 配置文件中声明该插件 // 发布阶段需要用到发 babel 插件 const prodPlugins [] if (process.env.NODE_ENV production) prodPlugins.push(transform-remove-console)module.exports {presets: [vue/cli-plugin-babel/preset],plugins: [[component,{libraryName: element-ui,styleLibraryName: theme-chalk}],babel/plugin-syntax-dynamic-import,// 发布产品时用到的插件数组...prodPlugins] }3、将路由改为按需加载的形式打开router.js更改引入组件代码如下 import Vue from vue import VueRouter from vue-router // import login from ../components/Login.vue const login () import(/* webpackChunkName: login_home_welcome */ ../components/Login.vue) // import home from ../components/Home.vue const home () import(/* webpackChunkName: login_home_welcome */ ../components/Home.vue) // import welcome from ../components/Welcome.vue const welcome () import(/* webpackChunkName: login_home_welcome */ ../components/Welcome.vue)// import users from ../components/user/Users.vue const users () import(/* webpackChunkName: users_rights_roles */ ../components/user/Users.vue) // import rights from ../components/power/Rights.vue const rights () import(/* webpackChunkName: users_rights_roles */ ../components/power/Rights.vue) // import roles from ../components/power/Roles.vue const roles () import(/* webpackChunkName: users_rights_roles */ ../components/power/Roles.vue)// import cate from ../components/goods/Cate.vue const cate () import(/* webpackChunkName: cate_params */ ../components/goods/Cate.vue) // import params from ../components/goods/Params.vue const params () import(/* webpackChunkName: cate_params */ ../components/goods/Params.vue)// import goods from ../components/goods/List.vue const goods () import(/* webpackChunkName: goods_add */ ../components/goods/List.vue) // import addGoods from ../components/goods/Add.vue const addGoods () import(/* webpackChunkName: goods_add */ ../components/goods/Add.vue)// import orders from ../components/order/Order.vue const orders () import(/* webpackChunkName: orders_reports */ ../components/order/Order.vue) // import reports from ../components/report/Report.vue const reports () import(/* webpackChunkName: orders_reports */ ../components/report/Report.vue)关于路由懒加载的详细文档可参考此链接。 项目上线 通过 node 创建 web 服务器 创建一个文件夹 vue_shop_server 存放 node 服务器使用终端打开 vue_shop_server 文件夹输入命令 npm init -y初始化包之后输入命令 npm i express -S打开 vue_shop 目录复制dist文件夹粘贴到 vue_shop_server 中在 vue_shop_server 文件夹中创建 app.js 文件,编写代码如下 const express require(express) const app express()// 将打包的目录托管为静态资源 app.use(express.static(./dist))// 启动服务器 app.listen(8090, function() {console.log(express server running at http://127.0.0.1:8090) })开启 gzip 配置 使用 gzip 可以减小文件体积使传输速度更快。 1、打开 vue_shop_server文件夹的终端输入命令npm i compression -D 2、可以通过服务器端使用 Express 做 gzip 压缩。其配置如下 // 开启 gzip 一定要挂载在静态资源托管之前 const compression require(compression) app.use(compression())配置 HTTPS 服务 传统的 HTTP 协议传输的数据都是明文不安全采用 HTTPS 协议对传输的数据进行了加密处理可以防止数据被中间人窃取使用更安全。 申请 SSL 证书申请地址 进入 https://freessl.cn/ 官网输入要申请的域名并选择品牌。输入自己的邮箱并选择相关选项。验证 DNS在域名管理后台添加 TXT 记录。验证通过之后下载 SSL 证书 full_chain.pem 公钥private.key 私钥。 在后台项目中导入证书配置 HTTPS 服务 const https require(https) const fs require(fs) // 读取公钥和私钥 const options {cert: fs.readFile(./full_chain.pem),ket: fs.readFile(./private.key) } // 启动 https 服务器 https.createServer(options, app).listen(443)pm2 管理应用 安装 pm2在终端执行如下命令安装 pm2 npm i pm2 -g使用 pm2进入服务器项目目录vue_shop_server 启动项目pm2 start 脚本 --name 自定义名称查看运行项目pm2 ls重启项目pm2 restart 自定义名称/id停止项目pm2 stop 自定义名称/id删除项目pm2 delete 自定义名称/id