Vue实战中常见问题解决方案之----部署

Vue-cli3.0 项目结构更加简洁，省略了对配置文件的繁琐处理，但是当我们部署时资源文件路径问题的还是需要手动添加一些配置文件：

一般准则

如果您使用Vue CLI以及作为其部署的一部分处理静态资产的后端框架，您需要做的就是确保Vue CLI在正确的位置生成构建的文件，然后遵循后端框架的部署指令。

如果您是通过前后端分离来开发应用程序 -(即您的后端为您的前端公开API以进行通信)，那么您的前端本质上是一个纯粹的静态应用程序。您可以将dist目录中的构建内容部署到任何静态文件服务器，但请确保设置正确的baseUrl。

具体操作

下边你要做的就是在根目录下新建一个vue.config.js文件，进行你的配置，我在最下边简单罗列了几个：

// vue.config.js 配置说明
// 这里只列一部分，具体配置惨考文档啊
module.exports = {
    // baseUrl  type:{string} default:'/' 
    // 将部署应用程序的基本URL
    // 将部署应用程序的基本URL。
    // 默认情况下，Vue CLI假设您的应用程序将部署在域的根目录下。
    // https://www.my-app.com/。如果应用程序部署在子路径上，则需要使用此选项指定子路径。例如，如果您的应用程序部署在https://www.foobar.com/my-app/，集baseUrl到'/my-app/'.

    baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',

    // outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'

    // outputDir: 'dist',

    // pages:{ type:Object,Default:undfind } 
/*
  构建多页面模式的应用程序.每个“页面”都应该有一个相应的JavaScript条目文件。该值应该是一
  个对象，其中键是条目的名称，而该值要么是指定其条目、模板和文件名的对象，要么是指定其条目
  的字符串，
  注意：请保证pages里配置的路径和文件名 在你的文档目录都存在 否则启动服务会报错的
*/
    // pages: {
        // index: {
            // entry for the page
            // entry: 'src/index/main.js',
            // the source template
            // template: 'public/index.html',
            // output as dist/index.html
            // filename: 'index.html'
        // },
        // when using the entry-only string format,
        // template is inferred to be `public/subpage.html`
        // and falls back to `public/index.html` if not found.
        // Output filename is inferred to be `subpage.html`.
        // subpage: 'src/subpage/main.js'
    // },

    //   lintOnSave：{ type:Boolean default:true } 问你是否使用eslint
    lintOnSave: true,
    // productionSourceMap：{ type:Bollean,default:true } 生产源映射
    // 如果您不需要生产时的源映射，那么将此设置为false可以加速生产构建
    productionSourceMap: false,
    // devServer:{type:Object} 3个属性host,port,https
    // 它支持webPack-dev-server的所有选项

    devServer: {
        port: 8085, // 端口号
        host: 'localhost',
        https: false, // https:{type:Boolean}
        open: true, //配置自动启动浏览器
        // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
        proxy: {
            '/api': {
                target: '<url>',
                ws: true,
                changeOrigin: true
            },
            '/foo': {
                target: '<other_url>'
            }
        },  // 配置多个代理
    }
}

在vue.config.js中设置正确的baseUrl。

如果要部署到  https:// ***.com/，则可以省略baseUrl，因为它默认为“/”。

如果要部署到 https:// ***.com/<REPO>/,（ 即您的存储库位于 https://***.com/<REPO>/ ），请将baseUrl设置为“ /<REPO>/ ”。

       例如，如果您的repo名称是“vuejs”，则您的vue.config.js应如下所示：

 

大功告成，祝大家部署成功！！！