webpack vue-cli及其相关配置 postcss,别名，跨域代理，多页面

目录

• vue-cli
• 生成output.js文件
• 配置文件导入时的前缀别名
• 配置css相关loader 移动端适配布局，post-css-to-viewport
• 配置跨域和代理
• 多页面：

 

vue-cli

vue-cli底层也是采用webpack

生成output.js文件

vue inspect > output.js

配置文件导入时的前缀别名

vue.config.js
使用示例：@import "assets/style/mixin.scss";

const path = require('path');

module.exports = {

    chainWebpack: config => {
        config.resolve.alias.set('assets',path.resolve(__dirname,'./src/assets/'))
        // config.resolve.
    }
}

配置css相关loader 移动端适配布局，post-css-to-viewport

外围配置：https://cli.vuejs.org/zh/config/#css-loaderoptions
参数配置：https://github.com/evrone/postcss-px-to-viewport/blob/HEAD/README_CN.md
配置这个插件以后，相关目录单位会自动转换px为vw

const pxtovm = require('postcss-px-to-viewport');

module.exports = {
    css: {
        loaderOptions: {
            css: {
                // 这里的选项会传递给 css-loader
            },
            postcss:
            {
                plugins: [
                    new pxtovm({
                        // 这里的选项会传递给 postcss-loader
                        unitToConvert: 'px', //需要转换的单位，默认为px
                        viewportWidth: 375,  //设计稿的视口宽度
                        unitPrecision: 5,   //单位转换后保留的精度
                        propList: ['*'],    //能转化成vm的属性列表
                        viewportUnit: 'vw', //希望使用的视口单位
                        fontViewportUnit: 'vw',//字体使用的视口单位
                        selectorBlackList: [],//需要忽略的css选择器，不会转换为视口单位
                        minPixelValue: 1,//设置最小的转换数值，如果为1的话，只有大于1的值会被转换
                        mediaQuery: false,//媒体查询里的单位是否需要转换单位
                        replace: true,//是否直接更换属性值
                        exclude: [/node_modules/],//忽略文件夹下的特定文件
                    })
                ]
            }
        }
    }
}

配置跨域和代理

const pxtovw = require('postcss-px-to-viewport')
const path = require('path')

module.exports = {
  //代理
  devServer: {
    proxy: {
      //代理,只要是/api路径下的请求,都转发到以下端口路径
      '/api': {
        target: 'http://localhost:3005/',
        //跨域
        changeOringin: true,
        pathRewrite: {
          //配置api代理，路径ixa的api和ajax都被正则替换成空字符串
          // '^/api/ajax': ''
        }
      },
      '/maoyan':{
        target:'http://m.maoyan.com',
        changeOringin:true,
        pathRewrite:{
          '^/maoyan':''
        }
      }
    }
  }
}

多页面：

spa:单页面，single page application
如何判断是单页面还是多页面？
路径跳转的时候，判断url的前缀是否变化
如果是/index/movie跳转到index/music,那么是单页面
如果是/index/movie跳转到detail,那么是多页面不同页面
多页面的html不同，绑定的入口js文件也不同

  pages: {
    index: {
      // page 的入口
      entry: 'src/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。 index要和上面对应,指定的是入口的js文件名
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    detail: {
      // page 的入口
      entry: 'src/detail.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/detail.html 的输出,这里不能叫index.html,否则会被覆盖
      filename: 'detail.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'detail Page',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。 index要和上面对应,指定的是入口的js文件名
      chunks: ['chunk-vendors', 'chunk-common', 'detail']
    },
  }