webpack (十一) -路径别名——@符设置src下文件的绝对路径 & 文件后缀——省略.vue等文件后缀，页面同样生效

19-webpack-路径别名——@符设置src下文件的绝对路径

基于webpack，可以使用@符设置src下文件的绝对路径

入口文件index.js修改 vue文件的 绝对路径

第一步：webpack.config.js中进行加载器配置

  //解析路径
  resolve: {
    //别名
    alias: {
        //resolve 获取绝对路径的API，join也可以获取; @ 也可以用 $,就是个 别名
      '@': path.resolve(__dirname, './src')    // 设置 src的绝对路径 
    }
  },

注意： webpack.config.js修改之后，要重启服务器

第二步：npm run serve ,打开页面验证vue组件内容显示正常

20-webpack-文件后缀——省略.vue等文件后缀，页面同样生效

入口文件index.js删除 APP.vue文件的 后缀名 .vue

第一步：webpack.config.js中进行加载器配置

 //解析路径
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    },
    //省略后缀
+    extensions: ['.js', '.vue', '.json', '.css']   //后缀名 可以根据需要自由增减
  },

注意： webpack.config.js修改之后，要重启服务器

第二步：npm run serve ,打开页面验证vue组件内容显示正常