部署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