打包vue-admin-template到Django项目记录

2023-12-25 08:58:46

前端vue-admin-template

1、将mock删除

1、删除目录列表中的mock
2、删除util下的mock的axios
3、删除vue-config.js里面的before: require('./mock/mock-server.js')

2、将.env.production中的VUE_APP_BASE_API修改为自己后端地址

VUE_APP_BASE_API = 'http://172.16.84.55:8080'

3、修改vue-config.js文件需求将publicPath使用…/…/否则element ui图标不显示

publicPath: '../../',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'http://172.16.84.55:8000',
        changeOrigin: true
      }
    }
  },

4、修改router下的index.js将模式改为hash

mode: 'hash',

5、修改package.json文件中的"build:prod

"scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build --mode prod",  #修改此处
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
    "lint": "eslint --ext .js,.vue src",
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "test:ci": "npm run lint && npm run test:unit"
  },

最后运行

npm run build:prod

至此前端项目打包完成dist文件目录如下（图片mytouxaing.jpg请忽略）

后端Django

1、根目录下创建templates，将index.html复制到其下
2、根目录下创建static,将fonts,img,js以及图片复制到其下
3、配置settings文件

ALLOWED_HOSTS = ['*']

STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)

4、配置index.html文件，主要修改一下资源引入的路径，哪里颜色不对劲改哪里

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="../static/favicon.ico">
    <title>Vue Admin Template</title>
  <link href="../static/js/app.js" rel="preload" as="script"><link href="../static/js/chunk-vendors.js" rel="preload" as="script"></head>
  <body>
    <noscript>
      <strong>We're sorry but Vue Admin Template doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="../static/js/chunk-vendors.js"></script><script type="text/javascript" src="../static/js/app.js"></script></body>
</html>

5、修改url

from django.views.generic import TemplateView
path('page/', TemplateView.as_view(template_name="index.html")),

6、访问网页例如（访问自己端口）

http://172.16.106.195:8000/page/

至此打包项目到应用到Django项目就完成了，如果有哪些写的不对的地方兄弟姐妹们多多理解，加以指正，学习的不够深，都是自己通过实践摸索出来
有一些地方自己也不是特别理解比如publicPath: ‘…/…/’,如果不这样写后端就访问不到element ui 图标问题。

码农公寓

前端vue-admin-template

后端Django

相关文章