- 492
- 0
使用vue-cli脚手架生成的vue项目。没有build文件夹,没法配置webpack.base.conf.js。
通过vue.config.js配置webpack配置configureWebpack vue-loader不生效。希望通过vue-loader的preLoaders用自己写的loader处理html。已安装vue-loader15版本。
webpack的配置项
module.exports = {
lintOnSave: false,
publicPath: BASE_URL,
configureWebpack: (config) => {
const output = {
// 把应用打包成 umd 库格式
library: `${name}`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${name}`,
};
// 为生产环境修改配置...
// config.mode = 'development';
let output2 = {
...output,
devtoolModuleFilenameTemplate: 'webpack://[namespace]/[resource-path]'
}
return {
output: output2,
module: {
rules: [{
test: /\.less$/,
use: [
'less-loader',
{
loader: require.resolve('px2rem-loader'),
options: {
remUnit: 14, // 这里是因为给的设计图是按照768*1024pad的尺寸来的,因此设置啦这个单位,一般750手机设计图单位设置为75
},
},
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
// `loaders` 覆盖默认 loaders。
// 以下配置会导致所有无 `lang` 特性的 `<script>` 标签加载 `coffee-loader`
// loaders: {
// js: 'coffee-loader',
// css: ExtractTextPlugin.extract({
// use: 'css-loader',
// fallback: 'vue-style-loader' // <- 这是vue-loader的依赖,所以如果使用npm3,则不需要显式安装
// })
// },
// `preLoaders` 会在默认 loaders 之前加载。
// 你可以用来预处理语言块——一个例子是用来处理构建时的 i18n
preLoaders: {
// js: '/path/to/custom/loader',
html: path.resolve('build/preLoader-makeId.js')
},
// `postLoaders` 会在默认 loaders 之后加载。
//
// - 对于 `html`, 默认 loader 返回会编译为 JavaScript 渲染函数
//
// - 对于 `css`, 由`vue-style-loader` 返回的结果通常不太有用。使用 PostCSS 插件将会是更好的选择。
// postLoaders: {
// html: 'babel-loader'
// },
// `excludedPreLoaders` 应是正则表达式
// excludedPreLoaders: /(eslint-loader)/
}
}
],
},
plugins: [
new VueLoaderPlugin()
]
};
return {
output,
};
}
0
打赏
收藏
点击回答
- 共 0 条
- 全部回答
-
VIP、首席╮ 普通会员 1楼Vue CLI 使用的 vue-loader 的配置通常是通过 `vue.config.js` 文件来修改的。如果在项目中配置了 `vue.config.js` 但 vue-loader 没有生效,可能的原因及解决方案如下: 1. **配置文件位置和名称错误**: 确保你的配置文件位于项目的根目录下,并且文件名是 `vue.config.js`。 2. **配置格式不正确**: 配置文件内容需要是一个导出对象的 JavaScript 文件,例如: ```javascript module.exports = { // ...你的配置项 chainWebpack: (config) => { const vueLoader = config.module.rule('vue') .use('vue-loader') .loader('vue-loader') .tap(options => { // 修改 vue-loader 配置 return options }) }, } ``` 3. **webpack 配置覆盖不正确**: 如果你想要修改 vue-loader 的选项,你需要在 `chainWebpack` 或者 `configureWebpack` 中操作。以下是一个示例,用于更新 vue-loader 的选项: ```javascript module.exports = { chainWebpack: (config) => { config.module .rule('vue') .use('vue-loader') .loader('vue-loader') .options({ // 这里可以添加或修改 vue-loader 的选项 compilerOptions: { whitespace: 'preserve', }, transformAssetUrls: { img: 'src', image: 'xlink:href', source: 'src', video: 'src', audio: 'src', }, }) }, } ``` 4. **重启开发服务器**: 在修改 `vue.config.js` 后,请确保重启 Vue CLI 的开发服务器以应用新的配置。 5. **检查 vue-loader 版本**: 确保你的 vue-loader 版本与 Vue CLI(或者手动安装的 webpack 版本)兼容。 6. **查看控制台输出**: 查看浏览器开发者工具的 Console 输出或终端运行 Vue CLI 时的输出,可能会有关于配置错误的提示信息。
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

