后台管理打包上线、自己创建的服务器

最新推荐文章于 2023-12-24 16:33:09 发布

原创

最新推荐文章于 2023-12-24 16:33:09 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文详细介绍了Vue项目的优化技巧，包括添加进度条、使用ESLint修正代码、免配置的build过程、修改Webpack配置、加载外部CDN、定制首页内容、实现路由懒加载等。此外，还讲解了如何用Node搭建后台服务器，启用gzip压缩，并使用pm2进行应用管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我的优化可以让16mb优化成几mb或者kb
目录：
1.添加进度条
2.根据报错修改代码这个是要有eslint
3…执行build
4.修改webpack的默认配置
5.加载外部CDN
6…定制首页内容
7.路由懒加载
8.项目上线

一、添加进度条

先下载·nprogress 然后放到封装的axios中当axios请求数据的时候有进度条，当拦截的时候关闭进度条

import NProgress from 'nprogress'
//3. 请求拦截器配置
Server.interceptors.request.use(
  (config) => {
   
   
    NProgress.start()
    // if (store.state.token) {
   
   
    //     config.header = store.state.token
    // }
    let token = sessionStorage.getItem("token-for-the-kin");
    if (store.state.token.length > 0) {
   
   
      config.headers["Authorization"] = store.state.token;
    }

    return config;
  },
  (error) => {
   
   
    return Promise.reject(error);
  }
);

//4. 相应拦截器
Server.interceptors.response.use(
  (response) => {
   
   
    console.log(response);

    if (response.data.meta.status == 400) {
   
   
      var token = store.state.token;
      response.headers["Authorization"] = token;
      console.log(token);
    }
    //过滤返回的data值
    if (response.status == 200) {
   
   
      return response.data;
    }
    NProgress.done()
    return response;
  },
  (error) => {
   
   
    return Promise.reject(error);
  }

二、.根据报错修改代码这个是要有eslint
这个是要在 eslint
根据ESLint的警告提示更改对应的代码
在.prettierrc文件中更改设置"printWidth":200, 将每行代码的文字数量更改为200

{
   
   
    "semi":false,
    "singleQuote":true,
    "printWidth":200
}

三、执行build 这个不用
这个可以不用配置

安装一个插件（babel-plugin-transform-remove-console）在项目build阶段移除所有的console信息
打开项目控制台，点击依赖->开发依赖，输入babel-plugin-transform-remove-console，安装
打开babel.config.js，编辑代码如下：

//项目发布阶段需要用到的babel插件
const productPlugins = []

//判断是开发还是发布阶段
if(process.env.NODE_ENV === 'production'){
   
   
  //发布阶段
  productPlugins.push("transform-remove-console")
}

module.exports = {
   
   
  "presets": [
    "@vue/app"
  ],
  "plugins": [
    [
      "component",
      {
   
   
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    ...productPlugins
  ]
}

4.修改webpack的默认配置
在src下面创建 main-prod.js main-dev.js 中的内容就是main中的内容

module.exports = {
   
   
  publicPath: "./",  //静态资源
  productionSourceMap: false,  //关闭map

    chainWebpack

最低0.47元/天解锁文章

200万优质内容无限畅学