pc打包flask和vue3项目部署在centos上

转载

mob64ca1415bcee 2024-12-15 19:55:31

文章标签 vue html css node.js 文章分类 架构后端开发

安装node.js

首先检查电脑是否安装node.js以及版本
官方建议，node.js的版本，需要是8.9或者以上（建议是8.11.0+）

检查方法:

1.首先打开cmd, win+r输入：‘ cmd ’ , 回车；
2. 在cmd输入node -v,回车,第一张表示未安装，第二张图片为已安装V后面是版本号;

3. 如果你已安装请下滑到搭建cli3环境；

4. 推荐
官方下载
，由于官方太慢作者提供了
node-v10.16.3-x64.msi
5. 一直下一步到安装完毕,然后打开cmd输入node -v查看是否显示版本号

6. 安装淘宝镜像（因为npm较慢推荐安装淘宝镜像之后使用cnpm代替npm

npm install -g cnpm --registry=https://registry.npm.taobao.org

搭建cli3

全局安装：npm install -g @vue/cli 检测是否安装正确：vue --version
创建项目：vue create admin(admin是目录名修改成自己的项目名)
例子:在d盘cli3文件夹下创建文件名为admin的项目 f:回车;cd cli3回车;vue create admin回车；
注：使用默认配置一直回车即可,手动配置请看官方文档
使用cnpm/npm下载成功后输入 cd admin 进入项目文件夹（admin改成自己的项目名）
输入vue ui 回车等待进入管理页面

1.点击左上角箭头指向地方选择刚才创建的项目

2.点击任务

3.点击server

4.点击运行

到这开发环境部署就全部完成啦，快去开发属于自己的项目吧！

项目打包

各位帅哥，美女们开发完自己项目可能有疑问了，写完自己的项目如何部署能，怎么打包上传到服务器上，作者也刚刚找到一种办法，支持萌新（求大佬别喷，刚入门测试可以占时先使用）

1.在项目根目录下创建vue.config.js

module.exports = {

    /* 部署应用包的基本URL */
    /* baseUrl 从 Vue CLI 3.3 起已弃用 ，请使用publicPath */
    //  baseUrl: process.env.NODE_ENV === "production" ? "./" : "./",
    publicPath: process.env.NODE_ENV === "production" ? "./" : "./",

    /* 生产环境构建文件的目录 defalut: dist */

    outputDir: "dist",

    /* 放置生成的静态文件目录（js css img） */

    assetsDir: "static",

    /* 指定生成的index.html 输出路径 相对 default: index.html */

    indexPath: "index.html",

    /* 指定生成文件名中包含hash default: true */

    filenameHashing: true,

    /* 多页模式下 */

    /* pages: {
  
      index: {
  
        // page 的入口
  
        entry: "src/index/main.js",
  
        // 模板来源
  
        template: "public/index.html",
  
        // 在 dist/index.html 的输出
  
        filename: "index.html",
  
        // 当使用 title 选项时，
  
        // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
  
        // title: "Index Page",
  
        // 在这个页面中包含的块，默认情况下会包含
  
        // 提取出来的通用 chunk 和 vendor chunk。
  
        chunks: ["chunk-vendors", "chunk-common", "index"]
  
      },
  
      // 当使用只有入口的字符串格式时，
  
      // 模板会被推导为 `public/subpage.html`
  
      // 并且如果找不到的话，就回退到 `public/index.html`。
  
      // 输出文件名会被推导为 `subpage.html`。
  
      // subpage: "src/subpage/main.js"
  
    } */

    /* 是否保存时 lint 代码 */

    lintOnSave: process.env.NODE_ENV === "production",

    /* 是否使用编译器 default: false */

    runtimeCompiler: false,

    /* 默认babel-loader会忽略node_modules中的文件，你想显示的话在这个选项中列出来 */

    // transpileDependencies: [],

    /* 生产环境的source map */

    productionSourceMap: true,

    // crossorigin: "",

    integrity: false,

    configureWebpack: {
        resolve: {
            alias: {
                'assets': '@/assets',
                'components': '@/components',
                'views': '@/views',
            }
        }
    },

    // css相关配置
  
    css: {

        // 是否使用css分离插件 ExtractTextPlugin

        extract: true,

        // 开启 CSS source maps?

        sourceMap: false,

        // css预设器配置项

        loaderOptions: {},

        // 启用 CSS modules for all css / pre-processor files.

        modules: false

    },

    devServer: {

        port: 8080,

        host: "0.0.0.0",

        https: false,

        // 自动启动浏览器

        open: false,

        proxy: {
            "/api": {
                //代理路径 例如 https://baidu.com
                target: "https://baidu.com",
                // 将主机标头的原点更改为目标URL
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    "^/api": ""
                }
            }
        }

    }

};