vue3.0全家桶实战过程中配置出现的问题解决记录

vue.config.js配置别名，跨域，以及端口

//vue3.0通过前端解决跨域的方式。注意：一定要在项目的根目录下的vue.config.js里面进行配置
const path = require('path')
const debug = process.env.NODE_ENV !== 'production'

module.exports={
    baseUrl: '/', // 根域上下文目录
    outputDir: 'dist', // 构建输出目录
    assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
    lintOnSave: false, // 是否开启eslint保存检测，有效值：ture | false | 'error'
    runtimeCompiler: true, // 运行时版本是否需要编译
    transpileDependencies: [], // 默认babel-loader忽略mode_modules，这里可增加例外的依赖包名
    productionSourceMap: true, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度

    configureWebpack: config => { // webpack配置，值位对象时会合并配置，为方法时会改写配置
        if (debug) { // 开发环境配置
            config.devtool = 'cheap-module-eval-source-map'
        } else { // 生产环境配置
        }
        Object.assign(config, { // 开发生产共同配置
            resolve: {
                alias: {
                   /* '@': path.resolve(__dirname, './src'),
                    '@c': path.resolve(__dirname, './src/components'),
                    'vue$': 'vue/dist/vue.esm.js',*/
                    'components':'@/components',
                    'content': 'components/content',
                    'common': 'components/common',
                    'assets': '@/assets',
                    'network': '@/network',
                    'views': '@/views',
                }
            }
        })
    },

    chainWebpack: config => { // webpack链接API，用于生成和修改webapck配置，https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
        // if (debug) {
        //     // 本地开发配置
        // } else {
        //     // 生产开发配置
        //}
    },
    parallel: require('os').cpus().length > 1, // 构建时开启多进程处理babel编译
    pluginOptions: { // 第三方插件配置
    },
    pwa: { // 单页插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    },
    //----------------------------------------------配置跨域-------------------------------------------------------------------------
    devServer: {
        open: true,
        host: 'localhost',
        port: 8089,
        https: false,
        hotOnly: false,
        proxy: { // 配置跨域
            '/api': {
                target: 'http://localhost:5000/api/',
                ws: true,
                changOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
        before: app => { }
    }

}

vue-cli3 取消eslint 校验代码

https://blog.csdn.net/weixin_39194138/article/details/82147832

vue router嵌套路由配置中的一些注意点

一级路由需要加/,
二级路由不要加/
/表示根路径
代码的路由嵌套关系相对应的route路由嵌套配置如下
一级路由

二级路由如下：

  routes: [
      {path:'/',redirect:'/index'},
      {
        path:'/index',
        component:Hello,
          children:[
              {path:'/',component:A},
              {path:'b',component:B},
              {path:'c',component:C},
          ]
      }

  ]

组件的模板之间有router-view的嵌套关系，所以只需要访问路径间的嵌套关系和它做映射。在route.js的配置文件做如上配置后，route负责完成他们之间关系的一一对应（正确的配置，）

 {
          path:'/index',
          name: 'index',
          component: Index,
          children:[
              {
                  path:'/',component:Main,
                  children:[
                      { path:'/',component:Home},
                      {path:'product',name:'product',component:Product}]
              },
          ]
      },