vue-cli项目搭建相关配置

515 阅读1分钟

环境变量

手动新建环境变量文件.env.local 等

    .env                # 在所有的环境中被载入
    .env.local          # 在所有的环境中被载入,但会被 git 忽略
    .env.[mode]         # 只在指定的模式中被载入
    .env.[mode].local   # 只在指定的模式中被载入,但会被 git 忽略

注意:必须以VUE_APP_开头。

    NODE_ENV = "production"
    VUE_APP_M_URL="https://tyou.m.autohome.com.cn/"
    VUE_APP_APP_URL="https://ty.autohome.com.cn/"
    VUE_APP_PC_URL="https://tyou.m.autohome.com.cn/"
    VUE_APP_OGC_URL="https://tyouedit.autohome.com.cn/"
    VUE_APP_PRODUCT_URL="https://tyouproduct.autohome.com.cn/"

环境变量的使用

    const M_DOMAIN = process.env.VUE_APP_M_URL

vue.config.js

vue-cli4默认没有这个文件,可以手动在根目录下新建一个

如何创建多页应用

自动生成的项目是单页应用,如果需要多页,可以手动行进更改

1.创建pages文件夹,每个页面对应一个子文件夹,里边存放的是一个单页应用,包含入口文件,路由,sotre

2.在vue.config.js中配置pages

module.exports = {
    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'
  }
}