lentoo / vue-admin

使用 vue-cli3 搭建的vue-vuex-router-element 开发模版,集成常用组件,功能模块
354 stars 109 forks source link

第三方库引用cdn的时候运行yarn serve 时报错 #5

Closed BG7ZAG closed 5 years ago

BG7ZAG commented 5 years ago

console.log报错Vue不存在 image

代码直接复制的

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // 这里是对环境的配置,不同环境对应不同的BASE_URL,以便axios的请求地址不同
    config.plugin('define').tap(args => {
      args[0]['process.env'].BASE_URL = JSON.stringify(process.env.BASE_URL)
      return args
    })

    // #region 忽略生成环境打包的文件

    var externals = {
      vue: 'Vue',
      axios: 'axios',
      'element-ui': 'ELEMENT',
      'vue-router': 'VueRouter',
      vuex: 'Vuex'
    }
    config.externals(externals)
    const cdn = {
      css: [
        // element-ui css
        '//unpkg.com/element-ui/lib/theme-chalk/index.css'
      ],
      js: [
        // vue
        '//cdn.staticfile.org/vue/2.5.22/vue.min.js',
        // vue-router
        '//cdn.staticfile.org/vue-router/3.0.2/vue-router.min.js',
        // vuex
        '//cdn.staticfile.org/vuex/3.1.0/vuex.min.js',
        // axios
        '//cdn.staticfile.org/axios/0.19.0-beta.1/axios.min.js',
        // element-ui js
        '//unpkg.com/element-ui/lib/index.js'
      ]
    }
    config.plugin('html')
      .tap(args => {
        args[0].cdn = cdn
        return args
      })

    // #endregion
  }
}

这是什么情况?

lentoo commented 5 years ago

你index.html 里面没有引入那些cdn文件。可以查看一下 public/index.html 文件

BG7ZAG commented 5 years ago
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <% if (process.env.NODE_ENV === 'production') { %>

      <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
        <link href="<%=css%>" rel="preload" as="style">
        <link rel="stylesheet" href="<%=css%>" as="style">
      <% } %>
      <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
        <link href="<%=js%>" rel="preload" as="script">
        <script src="<%=js%>"></script>
      <% } %>

    <% } %>

引入这些

BG7ZAG commented 5 years ago

还是说这个要.dev 里面的也要写成production?

BG7ZAG commented 5 years ago

还是说这个只能打包时用,开发的时候注释掉?

lentoo commented 5 years ago

你忽略打包那部分,要在 production 环境下使用,在 development 不需要 config.externals(externals) 可以通过 process.env.NODE_ENV === ‘production’ 来判断,你看我的 vue.config.js ,是有做区分的

BG7ZAG commented 5 years ago

看到了,之前没下载下来,没看到那个if包含到下面来。谢谢