关于vue-shop项目优化的注意事项

果酱包

于 2022-09-03 23:12:30 发布

阅读量372

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_46601680/article/details/126683073

版权

文章目录

一、配置CDN
二、Nprogress进度条

一、配置CDN

将第三方库用CDN的方式导入可以减小项目体积，需要在vue.config.js 和 public目录下的 index.html 中进行配置

1、vue.config.js中的配置

将自己项目中用到的依赖包导入。注意这里导入element-ui组件时，后面的值一定要大写ELEMENT ;nprogress的N也要大写
vue.config.js的配置

config.set('externals', {
     vue: 'Vue',
     'vue-router': 'VueRouter',
     axios: 'axios',
     echarts: 'echarts',
     nprogress: 'NProgress',
     'vue-quill-editor': 'VueQuillEditor'
     'element-ui': 'ELEMENT'
 })

2、index.html中的配置

在index.html的head区域导入依赖包的 css 和 js 包。
注意：
(1) nprogress进度条的版本号不要改
(2) vue-quill-editor富文本编辑器的版本号不要改
(3) 其他依赖包的版本号，可以改为你安装时的版本号，具体版本号可以在项目的package.json文件里查看
(4) 修改成自己版本号的href地址里不一定就有对应的 css 或 js 代码，可以复制你写的href地址，在浏览器里打开，如果显示了响应代码，那么这个href地址可用；如果显示 {“error”:“Document not found”} ，那么就不能用这个版本号的href地址，否则运行项目会在浏览器报错，具体如下：
富文本编辑器报错
有类似报错的，一般都是导入出现了问题。
(5) 这个cdn导入地址可以在各个依赖包的官网中查看，也可以直接百度搜 ”用cdn方式引入xxx“，比如：”用cdn方式引入nprogress“ ，这个href地址不唯一，只要打开里面有代码，引入的版本号和你安装的版本号差距不太大，基本没有问题。
具体代码如下：
index.html的配置

<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 %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>
    <!-- 只有prod(发布阶段)生效 -->
    <% if(htmlWebpackPlugin.options.isProd){ %>
    <!-- nprogress 的样式表文件 -->
    <link rel="stylesheet" href="https://unpkg.com/nprogress@0.2.0/nprogress.css" />
    <!-- 富文本编辑器 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
    <!-- element-ui 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css" />

	<!-- 导入js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.5.1/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.27.2/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/5.3.3/echarts.min.js"></script>
    <script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
    <!-- 富文本编辑器的 js 文件 -->
    <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
    <!-- element-ui 的 js 文件 -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.js"></script>
    <% } %>
 </head>

3、将main.js中的导入删除

将第三方依赖包的css样式注释掉（先别删以防万一），这里要注意的就是千万别删多了，自己写的全局样式一定要保留！
在这里插入图片描述

二、Nprogress进度条

Nprogress进度条是在axios的请求拦截器和相应拦截器里开启和关闭。
如果你是在main.js文件中配置的进度条，那么按上述的方式配置应该没有问题。
如果你是把axios发请求单独写的一个模块，还需要额外配置。在你使用nprogress的文件里导入nprogress的css样式。
nprogress配置

// 导入进度条NProgress的js和css
import NProgress from 'nprogress'
// import "nprogress/nprogress.css"
// 导入css样式
const new_element = document.createElement('link');
new_element.setAttribute('rel', 'stylesheet');
new_element.setAttribute('href', 'https://unpkg.com/nprogress@0.2.0/nprogress.css');
document.body.appendChild(new_element);

这是在js文件中导入css样式的写法。
记得每次改完代码要重新打包一遍哦 (^_^)