vue-cli构建的项目 CDN引入框架文件的问题

vue-cli2.x中用法

1、 index.html中引入相关的js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>我是标题</title>
    <script src="//cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script src="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="//cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <script src="//cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <script src="/map/map_loader.js"></script>
    <!-- built files will be auto injected -->
  </body>
</html>

2、修改build/webpack.base.conf.js文件，通过externals选项加载外部扩展，引入依赖库，不需要webpack处理

module.exports = {
  ...
  externals: {
    'vue': 'Vue', // 左侧vue是我们自己引入时候要用的，右侧是开发依赖库的作者定义的，是固定值，不同的库的这个值需要到相应的库的开发文档中获取，其实这个值最终就是绑定到window对象上的全局变量。
    'vue-router': 'VueRouter',
    'vuex': 'Vuex',
    'axios': 'axios'
  }
  ...
}

通过上面的配置后使用就还是跟以前一样使用就行了，

vue-cli3.x 使用方法

1、同上面的步骤1.
2、在vue.config.js configureWebpack选项中通过externals选项加载外部扩展，引入依赖库，不需要webpack处理

// ...
module.exports = {
  // ...
  configureWebpack: { // webpack配置，值位对象时会合并配置，为方法时会改写配置
    // 增加一个plugins
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      })
    ],
    externals: {
      'vue': 'Vue', // 左侧vue是我们自己引入时候要用的，右侧是开发依赖库的主人定义的不能修改
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'axios': 'axios',
      // 'element-ui': 'ELEMENT'
    }
  },
  // ...
};

在使用的过程中遇到了一个问题，就是通过cdn引入压缩的vue文件，启动项目后，google浏览器vue开发插件无法工作，也是纠结了很久才找到是这个原因导致的。把上面的vue的cdn地址改成//cdn.bootcss.com/vue/2.5.2/vue.js就行了。那么问题就来了，我不可能在生产环境使用未被压缩的库文件吧？

上面的问题就引出了另一个问题。”怎么在vue的html文件里根据不同的环境加载不同的文件？“

稍微注意点我们就会发现在vue-cli生成的项目，index.html里面有这样一句代码

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

代码里面动态输出了一个变量，我猜测这个语法是ejs模板语法，所以我大胆地尝试了一下

<% if(1 === 1) { %>
    <script src="//cdn.bootcss.com/vue/2.5.2/vue.js"></script>
<% } else { %>
    <script src="//cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<% } %>

发现能正常加载输出script标签并加载vue文件。这是因为vue-cli-service内部使用html-webpack-plugin处理的html文件，而html-webpack-plugin内部使用了ejs模板。

来到node_modules 的 html-webpack-plugin，在index.js里就能看到他的逻辑了

class HtmlWebpackPlugin {
  constructor (options) {
    // Default options
    this.options = _.extend({
      template: path.join(__dirname, 'default_index.ejs'),
      templateParameters: templateParametersGenerator,
      filename: 'index.html',
      hash: false,
      inject: true,
      compile: true,
      favicon: false,
      minify: false,
      cache: true,
      showErrors: true,
      chunks: 'all',
      excludeChunks: [],
      chunksSortMode: 'auto',
      meta: {},
      title: 'Webpack App',
      xhtml: false
    }, options);
  }
}

上面的代码肯定不陌生，就是我们在写插件或者库的时候接收对象类型参数时，用来做传入参数和默认值的合并用的。上面有个template参数，用来指定编译时的模板文件，根据他的默认值就能看出是用了ejs模板引擎了。default_index.ejs内容如下：

// html-webpack-plugin/default_index.ejs
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
  </body>
</html>

有了上面的理解，我们需要做的就是把1===1换成我们想要的逻辑就行了，就是获取环境变量来来判断是生产环境还是开发环境。既然是webpack处理的html文件，那么在上下文中就肯定能访问到webpack在运行时的node环境变量process.env

最终index.html代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>我是标题</title>
    <% if(process.env.VUE_APP_NODE_ENV === 'development') { %>
      <script src="//cdn.bootcss.com/vue/2.5.2/vue.js"></script>
    <% } else { %>
      <script src="//cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <% } %>
    <script src="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="//cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <script src="//cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <script src="/map/map_loader.js"></script>
    <!-- built files will be auto injected -->
  </body>
</html>

通过上面的调整，就能同时使用cdn引入库文件而不影响我们原来的调试了

vue-cli构建的项目 CDN引入框架文件的问题

vue-cli2.x中用法

vue-cli3.x 使用方法

vue3 必要tsconfig配置

vscode中支持vue-cli3构建的项目eslint对vue文件的检测

评论 (0)