vue之js、css等静态文件的引入(vue路径篇)

2022-03-11 10:15:01

1、如何引入如js,css等文件?
比如我们想引入jQuery文件或者依赖

若是已下载好的jQuery文件,则这样引入。
打开webpack.base.conf.js,在relove加入这段代码

// 在开头引入webpack,后面的plugins那里需要
var webpack =require('webpack')
// resolve

module.exports = {
   // 其他代码...
   resolve: {
      extensions: ['','.js','.vue'],
      fallback: [path.join(__dirname,'../node_modules')],
      alias: {'src': path.resolve(__dirname,'../src'),'assets': path.resolve(__dirname,'../src/assets'),'components': path.resolve(__dirname,'../src/components'),

          // webpack 使用 jQuery,如果是自行下载的
          //'jquery': path.resolve(__dirname,'../src/assets/libs/jquery/jquery.min'),
          // 如果使用NPM安装的jQuery'jquery':'jquery' 
      }
   },

   // 增加一个plugins
   plugins: [
      new webpack.ProvidePlugin({
          $:"jquery",
          jQuery:"jquery"
      })
   ],

   // 其他代码...
}

这样子就可以正确使用jqeury了。
引入jQuery后,比如我们想要引入boostrap,在main.js文件开头加入

import'./assets/libs/bootstrap/css/bootstrap.min.css'import'./assets/libs/bootstrap/js/bootstrap.min'

也不一定是引入在main.js文件,也可以引入到你想要引用到的组件中。

!!!有一点需要注意的是经过尝试,要把js、css文件等放在src文件夹中

jQuery用依赖来引入方法:
1、首先在pakage.json里加入

dependencies:{"jquery" :"*"//*为号为最新版
}

然后在打开这个文件夹中的命令行 npm install 下载依赖。

2、在webpack.base.conf.js里加入

var webpack =require("webpack")

3、在module.exports的最后加入

plugins: [new webpack.optimize.CommonsChunkPlugin('common.js'),new webpack.ProvidePlugin({
     jQuery:"jquery",
     $:"jquery"
 })
]

4、然后重启

npm run dev

5、在main.js 引入

import $from'jquery'
那么,为什么必须要把这些文件放在src中呢?

且听下回分解!
  • 作者:CruellyJohn
  • 原文链接:https://blog.csdn.net/qq_40421277/article/details/79323252
    更新时间:2022-03-11 10:15:01