后台管理项目打包上线，以及自己搭建服务器

最新推荐文章于 2023-07-08 11:14:38 发布

weixin_48992836

最新推荐文章于 2023-07-08 11:14:38 发布

阅读量709

点赞数

分类专栏：打包以及上线文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_48992836/article/details/118117367

版权

打包以及上线专栏收录该内容

1 篇文章 1 订阅

订阅专栏

1.首先打包上线的时候我们先需要进行一个npm run build
2.然后的话你会发现此时的页面是一个空白的页面，这时候的话，我们需要在根目录下面创建一个vue.config.js文件夹，然后将将绝对路径改成相对路径，这时候在 npm run build 这时候就可以运行的起来了，但是你会发现此时的项目时非常大的我们需要进行一些压缩的操作

1.在根目录创建文件夹

在这里插入图片描述

2.在文件夹中进行压缩操作

module.exports = {
    publicPath: "./",
    productionSourceMap: false,
   
}

3.CDN的一个修改

1.这次我们打包是将mian.js分成两个来进行一个线上，线下的判断

2.我们需要修改一下发布模式的一个main-prod.js，应为这里的话我们使用的都是一个线上文件，所以要把不要的东西注释掉

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false;


// import echarts from 'echarts'

// Vue.prototype.$echarts = echarts
// 导入全局样式
import "./assets/css/global.css"

//导入axios的基本信息配置
import axios from "./utils/request";
Vue.prototype.$axios = axios;

//配置elementUI
import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);


// import { Lazyload } from 'vant';
// Vue.use(Lazyload);

//全局过滤器
Vue.filter('reverse', function (val) {
  return val.split("").reverse().join("");
})
// Vue.prototype.echarts = echarts
//富文本
import VueQuillEditor from 'vue-quill-editor'
// import 'quill/dist/quill.core.css'
// import 'quill/dist/quill.snow.css'
// import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
// 添加token令牌
axios.interceptors.request.use(config => {
  config.headers.Authorization = store.state.token
  return config
})


new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3.vue.confilg.js中的全部操作

module.exports = {
    publicPath: "./",
    productionSourceMap: false,
    chainWebpack:config=>{
        //发布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默认的打包入口，调用clear则是删除默认的打包入口
            //add添加新的打包入口
            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'
            })
              //使用插件
            config.plugin('html').tap(args=>{
                //添加参数isProd
                args[0].isProd = true
                return args
            })
        })
        //开发模式
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

4.然后再打开public文件夹下面的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 %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.isProd ? '测试' : '开发' %>电商后台管理系统</title>
    
    
    
    <% if(htmlWebpackPlugin.options.isProd){ %>
    <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.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.8.2/theme-chalk/index.css" />
    <% } %>
    <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.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.8.2/index.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but mypro doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

这里可能有个小问题，当我们打包完之后，然后在本地进行一个运行的时候，是会报错一个router.js的问题，这里的话我们需要进行一个判断，然后就解决问题了

搭建服务器

1.首先创建一个空的文件夹
2.cmd进入终端
4.初始化文件夹输入命令npm init -y
5.初始化包之后，输入命令npm i express -S
6.就是将我们打包好的dist文件夹放入到根目录上面
7.然后在根目下面创建一个空的app.js文件，放入所需要的代码
8.然后再次在终端中输入 node app.js，就可以了

const express = require('express')

const app = express()

app.use(express.static('./dist'))

app.listen(8998,()=>{
    console.log("server running at http://127.0.0.1:8998")
})

weixin_48992836

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
后台管理项目打包上线，以及自己搭建服务器

1.首先打包上线的时候我们先需要进行一个npm run build2.然后的话你会发现此时的页面是一个空白的页面，这时候的话，我们需要在根目录下面创建一个vue.config.js文件夹，然后将将绝对路径改成相对路径，这时候在 npm run build 这时候就可以运行的起来了，但是你会发现此时的项目时非常大的我们需要进行一些压缩的操作1.在根目录创建文件夹2.在文件夹中进行压缩操作module.exports = { publicPath: "./", production.
复制链接

扫一扫