My images in vue single spa app are loaded with root config domain so it returns 404
My vue.config.js
'use strict'
const path = require('path')
const { defineConfig } = require("#vue/cli-service");
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
filenameHashing: false,
configureWebpack: {
output: {
libraryTarget: "system",
},
},
chainWebpack: config => {
config.module
.rule('i18n')
.resourceQuery(/blockType=i18n/)
.type('javascript/auto')
.use('i18n')
.loader('#kazupon/vue-i18n-loader')
},
devServer: {
disableHostCheck: true,
},
};
Dependencies:
"vue": "^2.5.17",
"single-spa-vue": "^2.5.1",
"systemjs-webpack-interop": "^2.3.7",
Below is dist folder that serve single spa Vue app
Does anyone know how to make Vue app load asset image with correct domain? Thank in advance.
Note: My Single SPA Vue app run on port 8111 and root config app run on port 8080
Related
I'm trying to configure vue.js webpack for development mode. I have a separate folder in root directory named "styles" where I keep all my scss and include main.scss to main.js. I want to have the separate css file in the dist folder.
There is my vue.config.js:
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'development') {
return {
plugins: [new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename:'[name].css'
})],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
}
}
}
}
Screen Result
I installed storybook via the vue-cli and added a .scss file in my preview.js:
import "assets/scss/core.scss";
import Vue from "vue";
import CompositionApi from "#vue/composition-api";
Vue.use(CompositionApi);
where "assets" is an alias configured in my vue.config.js to refer to the src/assets path. According to the docs :
The webpack config used for storybook is resolved from vue-cli-service, which means you don't need to have any special webpack section in storybook config folder.
So the path should ne correctly resolved, right ? However the style does not seem to be loaded as it is not applied to my components.
Am I missing something ?
FYI, here is my main.js:
module.exports = {
core: {
builder: "webpack5",
},
stories: ["../../src/**/*.stories.#(js|jsx|ts|tsx|mdx)"],
addons: [
"#storybook/addon-essentials",
"#storybook/addon-links",
],
};
And my vue.config.js :
const path = require("path");
module.exports = {
configureWebpack: {
resolve: {
alias: {
//aliases go here
"#": path.resolve(__dirname, "src"),
assets: path.resolve(__dirname, "./src/assets"),
},
},
},
css: {
loaderOptions: {
scss: {
additionalData: `#import 'assets/scss/variables';`,
},
},
},
};
Thanks !
I am currently coding a small vue component library for company's internal use. However, I faced some difficulties on building and deploy the project. This component library contains several components inside. And it will finally build by vue-cli-service build --target lib. The problem I am facing right now is that I have a component (i.e. called Audio.vue), and it will import a .mp3 file inside the component. The component is look like this
<template>
<audio controls :src="soundSrc" />
</template>
<script>
import { defineComponent } from 'vue';
import sound from './assets/sound.mp3';
export default defineComponent({
name: 'Audio',
props: {},
setup() {
return { soundSrc: sound };
},
});
</script>
<style scoped></style>
However, I use this component by serving (vue-cli-service serve") my project is fine. But if I build this project by running vue-cli-service build --target lib --name project-name-here. And I use this built version as a git submodule of my library in another vue project by importing project-name-here.common built before. The sound.mp3 import from './assets/sound.mp3' could not be found. It seems it is using a relative path of my another vue project (i.e. localhost:8080) instead of the library project
Here is my vue.config.js
const path = require('path');
module.exports = {
css: {
extract: false,
},
lintOnSave: false,
productionSourceMap: false,
configureWebpack: {
resolve: {
alias: {
mediaAsset: path.resolve(__dirname, './src/components/Audio/assets'),
},
},
},
chainWebpack: (config) => {
const imgRule = config.module.rule('images');
imgRule
.use('url-loader')
.loader('url-loader')
.tap((options) => Object.assign(options, { limit: Infinity }));
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgRule
.test(/\.svg$/)
.use('svg-url-loader') // npm install --save-dev svg-url-loader
.loader('svg-url-loader');
config.module
.rule('raw')
.test(/\.txt$/)
.use('raw-loader')
.loader('raw-loader');
config.module
.rule('media')
.test(/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/)
.use('url-loader')
.loader('url-loader')
.tap((options) =>
Object.assign(options, {
limit: 4096,
fallback: {
loader: 'file-loader',
options: {
name: 'media/[name].[hash:8].[ext]',
},
},
})
);
},
};
Appreciated for answering this question. Thanks.
when I ty yarn dev In server rendering Proxy is working fine. fetching data from API site api.server.com/api
But after yarn generate axios request is calling self server
current.example.com/api.
Why it is not working in dist html?
Is Proxy working only in server side? Please, help.
I have NuxtJS config:
/*
** Nuxt.js modules
*/
modules: [
'#nuxtjs/axios',
'#nuxtjs/proxy'
],
axios: {
proxy: true // Can be also an object with default options
},
proxy: {
'/api/': {
target: 'http://api.server.com/api',
pathRewrite: {'^/api/': ''}
},
changeOrigin: true
},
plugins axios.js
import axios from 'axios'
export default axios.create({
baseURL: '/api/',
responseType: 'json'
})
here I called that API like below index.vue
<script>
import axios from '~/plugins/axios'
export default {
mounted() {
this.loaded();
},
methods: {
loaded(){
const location = axios.get('/contact/contact_session.php').then((response) => {
console.log(response);
}).catch((err) => {
});
},
}
}
</script>
The proxy.js module only works in the development environment, in the production environment you must configure your web-server, preferably nginx, the proxy that takes your requests for example from the path "/ api / ..." and redirects it to the server you need.
The question has it all, but basically, I set up a new vue app without webpack. When I try to do:
handleSubmit() {
axios
.post(`${process.env.VUE_APP_API_URL}`)
.then(response => (this.info = response));
this.$router.push({ name: "ConversationsList" });
}
It's undefined. In my .env file, I have:
VUE_APP_API_URL=http://localhost:3000
What do I have to do now?
Easy fix. Created a file called vue.config.js:
const webpack = require('webpack')
module.exports = {
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
})
]
}
}