部署Vue项目至腾讯服务器

我是用的是Vue-Cli4版本。
由于Vue-Cli4没有config文件夹下的index.js文件。

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

注意: productionSourceMap: false ,这个为false,默认是true,改动的原因是:在最终打包的文件中会出现一些map文件,map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。

module.exports = {

    /* 部署应用包的基本URL */
    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: false,

    // 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": ""
  //             }
  //         }
  //     }
  // }
};

二、 在router文件夹下的index.js,注释掉mode

在这里插入图片描述

三、打包

最后输入:npm run build进行打包,生成dist文件夹,将这个dist文件放到服务器上,访问dist文件的index.html(可以在vue.config.js改动默认的index.html)就可以了。

项目部署成功,参考自如下:
1.cli3打包上传到服务器的相关配置
2.关于vue是怎么放到服务器上运行的基于vue-cli3
3.Vue项目如何部署到服务器
4.vue 设置 productionSourceMap

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue项目部署服务器下载可以通过以下几个步骤实现: 1. 选择合适的服务器。根据项目的需求和规模,选择适合的服务器供应商。常见的有阿里云、腾讯云等,可以根据自己的需求选择合适的套餐。 2. 注册账号并购买服务器。在服务器供应商的官网上注册账号,并购买适合的服务器套餐。根据项目的需求选择服务器配置,如CPU、内存、存储空间等。 3. 登录服务器控制台。登录服务器供应商的控制台,根据提供的IP地址、用户名和密码登录到服务器。 4. 安装操作系统。根据服务器的操作系统选择对应的安装方式,如Linux或Windows。按照服务器供应商提供的教程安装操作系统。 5. 安装Node.js。Vue项目依赖Node.js环境,需要服务器上安装Node.js。可以通过官方网站下载安装包或者使用包管理工具进行安装。 6. 配置服务器环境。根据项目的需求,配置服务器环境。比如安装数据库、Web服务器、SSL证书等。 7. 上传Vue项目代码。将本地开发的Vue项目代码通过FTP工具或者命令行工具上传到服务器上。 8. 安装项目依赖。在服务器上进入项目根目录,运行命令安装项目依赖,如npm install。 9. 构建项目。运行构建命令,如npm run build,将Vue项目打包成静态文件。 10. 部署项目。将构建完成的静态文件部署到Web服务器上,配置好域名和访问端口。 11. 启动服务器。运行启动命令,如npm start,启动服务器并运行Vue项目。 通过以上步骤,Vue项目可以成功部署服务器上,供用户访问和使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值