[英]Netlify Vue Build Failing To Find Export Modules
So I have a couple of modules that I am importing in to my main.js
and store.js
file that are not being found when building in Netlify and I cannot understand why.所以我有几个模块要导入到我的
main.js
和store.js
文件中,但在 Netlify 中构建时找不到这些模块,我不明白为什么。 When I run my build locally there is no issues.当我在本地运行构建时,没有问题。
So the 2 files are ability.js
and storage.js
所以这两个文件是
ability.js
和storage.js
This is the alarm from the build in netlify这是 netlify 中构建的警报
12:48:10 PM: These relative modules were not found:
12:48:10 PM: * ./utils/ability.js in ./src/main.js, ./src/store.js
12:48:10 PM: * ./utils/storage.js in ./src/store.js
12:48:10 PM: ERROR Build failed with errors.
Here is the ability.js file这是ability.js文件
import { Ability } from '@casl/ability'
export const ability = new Ability()
export const abilityPlugin = (store) => {
ability.update(store.state.rules)
const rules = store.subscribe((mutation) => {
switch (mutation.type) {
case 'createSession':
ability.update(mutation.payload[0])
break
case 'destroySession':
ability.update([{ actions: '', subject: '' }])
break
}
})
return rules
}
here is the storage.js file这是 storage.js 文件
export default (options) => (store) => {
if (localStorage.state) {
const storedState = JSON.parse(localStorage.state)
store.replaceState(Object.assign(store.state, storedState))
}
return store.subscribe((mutation, state) => {
if (options.destroyOn && options.destroyOn.indexOf(mutation.type) !== -1) {
return localStorage.removeItem('state')
}
const newState = options.storedKeys.reduce((map, key) => {
map[key] = state[key]
return map
}, {})
localStorage.state = JSON.stringify(newState)
})
}
and here are the 2 files where I import these modules这是我导入这些模块的 2 个文件
main.js主文件
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import { abilitiesPlugin } from '@casl/vue';
import { ability } from './utils/ability.js';
Vue.use(abilitiesPlugin, ability);
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')
store.js商店.js
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import { abilityPlugin, ability as appAbility } from './utils/ability.js'
import storage from './utils/storage.js'
export const ability = appAbility
Vue.use(Vuex)
axios.defaults.baseURL = 'https://aewcpa.traxit.pro/api'
axios.defaults.headers.common['header1'] = {
'X-Requested-With': 'XMLHttpRequest',
}
export default new Vuex.Store({
plugins: [
storage({
storedKeys: ['rules', 'token'],
destroyOn: ['destroySession']
}),
abilityPlugin
],
})
The directory structure with issues有问题的目录结构
The directory structure that currently works当前有效的目录结构
Is Utils in the root of your project? Utils 是否在您项目的根目录中? Are you using the Vue Webpack Template?
你在使用 Vue Webpack 模板吗?
If so the @ resolver is configured for you ( ES6 import using at ('@') sign in path in a vue.js project using Webpack )如果是这样,则为您配置了 @ 解析器( 使用 Webpack 的 vue.js 项目中使用 at ('@') 登录路径的 ES6 导入)
If so change:如果是这样改变:
from './utils/ability.js'
to from '@/utils/storage.js'
from './utils/ability.js'
到from '@/utils/storage.js'
and和
from './utils/storage.js'
to from '@/utils/storage.js'
from './utils/storage.js'
到from '@/utils/storage.js'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.