网上商城网站怎么做,哪些网站可以用来做百科参考,网站开发连接数据库,开通招聘网站如何做分录基于已有项目从cli 2项目升级到cli 3项目中#xff0c;需要修改的几项多页面更改vue.config.js配置#xff0c; 遍历src/views目录下的所有入口文件#xff0c;生成多个entry对象const site require(yargs).argv.siteconst glob require(glob)const path require(path)mo…基于已有项目从cli 2项目升级到cli 3项目中需要修改的几项多页面更改vue.config.js配置 遍历src/views目录下的所有入口文件生成多个entry对象const site require(yargs).argv.siteconst glob require(glob)const path require(path)module.exports {pages: getPages()}function getPages() {var entryFiles glob.sync(./src/views/*/*.js)var pages {}entryFiles.forEach((filePath) {var folderName getPageFolderName(filePath)pages[folderName] {entry: filePath,template: public/index.html,fileName: folderName .html,}})return pages}function getPageFolderName(filePath) {const matches (/.\/views\/([a-zA-Z0-9])\//g).exec(filePath)return matches.length matches.length 2 ? matches[1] : }最终输入一个pages对象{download:{ entry: ./src/views/download/index.js,template: public/index.html,fileName: download.html },information:{ entry: ./src/views/information/index.js,template: public/index.html,fileName: information.html },}预编译器的支持单独安装项目需要的预编译器# Sassnpm install -D sass-loader node-sass# Lessnpm install -D less-loader less# Stylusnpm install -D stylus-loader stylusstyle的公共样式自动导入可统一使用style-resources-loader导入公共样式到vue文件和其他scss文件注意事项config.module.rule(scss).oneOf(type), 其中rule函数的参数为项目用到的样式文件类型// vue.config.jsconst path require(path)module.exports {chainWebpack: config {const types [vue-modules, vue, normal-modules, normal]types.forEach(type addStyleResource(config.module.rule(scss).oneOf(type)))},}function addStyleResource (rule) {rule.use(style-resource).loader(style-resources-loader).options({patterns: [path.resolve(__dirname, src/assets/css/variable.scss),],})}运行时报错访问页面时报如下错误[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.原因vue有两种形式的代码 compiler(模板)模式和runtime模式(运行时)vue模块的package.json的main字段默认为runtime模式 指向了dist/vue.runtime.common.js位置。这是vue升级到2.0之后就有的特点。项目用到如下实例化vue的写法属于compiler模式// compilernew Vue({el: #app,router: router,store: store,template: ,components: { App }})解决办法一//runtimenew Vue({router,store,render: h h(App)}).$mount(#app)解决方案二修改webpack配置使vue加载时指向esm版configureWebpack: {resolve: {alias: {vue$: vue/dist/vue.esm.js}}
