vue-cli3

 

前言：

因为最近需要开发新的项目，需要新搭项目架构，于是，想使用最新的vue-cli3.0来搭建新项目了！

区别：

3.0和2.0区别还是蛮大的

1.主要是build.config关于webpack的配置文件夹没有了

2.那我们要配置自己的webpack，如何配置呢？这里不得不提到vue.config.js 官方文档了

构建安装：

按照下面的步骤安装就可以了

vue-cli官网

Vue-cli3初体验

干货：vue.config.js配置篇

const path = require('path')
const packageConfig = require('./package.json')
const contextName = packageConfig.name;


let proxy = {}, url = '/' + contextName;
proxy[url] = {
  changeOrigin: true, // //是否跨域
  target:
    // "http://10.10.204.243", // 测试
    //  "http://10.1.22.19:8090", // 本地ip
    // "http://10.1.21.118:8090", // 后台ip
    // "http://10.1.21.209:8090", // 后台ip 
     "http://10.1.22.138:8090",  // 后台ip
  filter: function(pathname, req) {
    let reg = `^/(${contextName})/.*\.(html|js|map|css|gif|jpg|png|woff|woff2|ttf|eot|svg|json|xlsx|rar|jpeg|doc|docx|zip|xls)$`;
    let match =  pathname.match(reg);
    return !match;
  },
  pathRewrite: {
    '^/api': ''//重写接口,后面可以使用重写的新路径，一般不做更改
  }
};
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : `/${contextName}`, // 部署应用包时的基本 URL
  outputDir: `${contextName}`, // 编译打包存放的目录默认dist
  assetsDir: 'static',
  lintOnSave: false, // 如果你不需要使用eslint，把lintOnSave设为false即可
  productionSourceMap: false, // 设为false打包时不生成.map文件
  devServer: {
    // Paths
    // assetsRoot: path.resolve(__dirname, '../dist/' + contextName),
    // assetsSubDirectory: 'static',
    // assetsPublicPath: `/${contextName}/`,
    // Various Dev Server settings
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(`${contextName}`, 'index.html') },
      ],
    },
    host: "0.0.0.0",
    port: 8081,
    open: false,
    proxy: proxy
  },
　　configureWebpack: config => {
    Object.assign(config, {
      externals: {
        BMap: "BMap"
      },
      resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          '@': path.resolve(__dirname, './src'),
          'vue$': 'vue/dist/vue.esm.js',
          'node_modules': path.resolve(__dirname, './node_modules')
        }
      }
    })
  },
  css: {
    extract: true,
    sourceMap: false,
    loaderOptions: {
    },
  },
  chainWebpack: config => { // 修改webpack配置
    const svgRule = config.module.rule('svg')  // 添加 svg loader
    // 清除已有的所有 loader。
    // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear()
    svgRule
      .test(/\.svg$/)
      .include.add([path.resolve(__dirname, './src/icons'), path.resolve(__dirname, './src/jportal-common-update/src/icons')]) // 添加需要处理svg文件的文件夹,不是在assets文件夹里面的svg
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
    const fileRule = config.module.rule('images') // 添加 images loader
    fileRule.uses.clear()
    fileRule
      .test(/\.(png|jpeg|gif|svg)(\?.*)?$/) 
      .exclude.add([path.resolve(__dirname, './src/icons'), path.resolve(__dirname, './src/jportal-common-update/src/icons')]) // 添加需要处理图片的文件夹，不是在assets文件夹里面
      .end()
      .use('url-loader')
      .loader('url-loader')
      .options({
        // limit: 51200, // 就这行下面
        name: 'static/img/[name].[hash:5].[ext]'
      })
  }

}

 

需求： 本地编译完成，地址栏加上二级域名，

类似：

需要添加二级域名需要在publicPath里面配置：

publicPath: process.env.NODE_ENV === 'production' ? './' : `/${contextName}`, // contextName: jspo-sc-mgr

publicPath：

• Type: string

• Default: '/'

部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。

默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。

这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid 应用的文件系统中。

 

 

 这个值在开发环境下同样生效。如果你想把开发服务器架设在根路径，你可以使用一个条件式的值：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}