I have installed vue cli on craft cms. The problem is that when I do npm run build as main index page the vue cli index.html page is displayed instead of the cms index page.
In the vue.conf.js file below I've tried to disable the index.html page but it doesn't work.
vue.config.js
module.exports = {
chainWebpack: config => {
config.plugins.delete('html');
config.plugins.delete('preload');
config.plugins.delete('prefetch');
}
};
Do you only want to delete the generated index.html?
Edit your vue.config.js accordingly.
configureWebpack: { plugins: [ new ManifestPlugin({ fileName: modern ? "manifest.json" : "manifest-legacy.json", publicPath: production ? "/dist/" : "/" }), new FileManagerPlugin({ onEnd: { // Delete unnecessary index.html file delete: ["./web/dist/index.html"] } }) ] }
Related
I have situation when i deploy NuxtJS App for production that I need put files in different paths.
I used this configurations before in Vue App in vue.config.js and it’s works fine:
module.exports = {
publicPath:'/assets/my_app/my_page/',
outputDir: path.resolve('../my_app/public/my_page'),
indexPath: path.resolve('../my_app/www/my_page.html'),
devServer: {
allowedHosts: ["my_site.com"],
proxy: {
'^/api': serverProxy,
'^/assets': serverProxy,
'^/files': serverProxy
}
}
};
How can do the same configurations in NuxtJS?
I tried this in nuxt.config.js but it not working:
build: {
publicPath:'/assets/my_app/my_page/',
// outputDir: path.resolve('../my_app/public/my_page'),
},
generate: {
dir: path.resolve('../my_app/www/my_page.html'),
},
there are different Dir properties that you can use in nuxt.config. I think
buildDir ,rootDir or srcDir can help you. However, you can access vue configuration and use your old solution by :
nuxt.config vue.config property
version 4.3 of vue cli is in use.
I hope the external css file will be created separately after the build.
I have to use that file somewhere else.
**current result**
root
┗dist
┗css
┗app.dsfe23f.css
┗js
┗app.ds3fe23f.js
┗app.ds1fe23f.map
┗chunk-vendors.ds3fe23f.js
┗chunk-vendors.ds1fe23f.map
┗public
┗index.html
┗src
┗assets
┗css
┗GiftStyle.css
┗router
┗index.js
┗view
┗Home.vue
┗Gift.vue
┗App.vue
┗main.vue
**What I want**
root
┗dist
┗css
┗app.dsfe23f.css
┗GiftStyle.dsf231.css
┗js
┗app.ds3fe23f.js
┗app.ds1fe23f.map
┗chunk-vendors.ds3fe23f.js
┗chunk-vendors.ds1fe23f.map
┗public
┗index.html
┗src
┗assets
┗css
┗GiftStyle.css
┗router
┗index.js
┗view
┗Home.vue
┗Gift.vue
┗App.vue
┗main.vue
*****vue.config.js
const ExtractTextPlugin = require('mini-css-extract-plugin')
module.exports = {
chainWebpack: config => { config.plugin('extract-css').use(ExtractTextPlugin, [{
filename: 'css/[name].css',
allChunks: true
}])
},
configureWebpack:{
},
assetsDir: 'resources'
}
I am using vue-cli3, when i build using npm run build -- --mode=production, it gives 2 css files and 2 js files.
Everytime i make a code change the name of the file also changes like app.de90cdf7.js and chunk-vendors.a9204242.js.
Is there a way in vue-cli to hardcode the files names as app.js and chunk-vendors.js ?
I'm little late to the party. We can chain webpack to apply name changes.
Using version #vue/cli 5.0.4 in year 2022
const { defineConfig } = require("#vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
chainWebpack : (config) => {
config.output.filename('[name].js');
},
css: {
extract: {
filename: '[name].css',
chunkFilename: '[name].css'
}
}
});
I have a project created through Vue CLI and now I want to use Pug with my Single File Components i.e. the .vue files.
To do that I started following this vue-loader documentation and installed pug and pug-plain-loader with the command npm install -D pug pug-plain-loader. And the next step there proposes inserting the follows in webpack.config.js
// webpack.config.js -> module.rules
{
test: /\.pug$/,
loader: 'pug-plain-loader'
}
But, using Vue CLI, I do not have an explicit webpack config file, but vue.config.js.
So, how to add such a pug-plain-loader configuration in vue.config.js (preferably using webpack-chain)?
My current vue.config.js already featuring a svg-loader is as follows:
module.exports = {
// ...
chainWebpack: (config) => {
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.use('vue-svg-loader')
.loader('vue-svg-loader')
//TODO: add pug-plain-loader configuration here
}
}
Accordingly with the example here, Vue CLI has it own way to define new rules in webpack. So this code seems to be the right way to define the pug loader (in your vue.config.js file - if doesn't exists, create it):
module.exports = {
chainWebpack: (config) => {
// Pug Loader
config.module
.rule('pug')
.test(/\.pug$/)
.use('pug-plain-loader')
.loader('pug-plain-loader')
.end();
},
};
This worked for me c:
(this apply only in .vue files that have lang="pug" specified in template tag)
I need some assistance or at least to be pointed in the right direction. I am attempting to deploy a vuejs app using Vue CLI 3. When I run the build command the files are built into the dist folder, which works fine. There is also a js and css folder inside dist that contain the respective files. In my index.html is created the paths as /css/app.css or /js/app.js. I want the files to just be placed in the dist folder along with index.html and the paths to read simply app.css or app.js. My goal is to remove the /css/.
I am assuming this is accomplished in the vue.config.js by configuring webpack. I can’t seem to figure this out. I understand the baseURL setting but I can figure this part out..any help would be appreciated.
Thanks
it's answered here
https://github.com/vuejs/vue-cli/issues/1967
basically config should look like this
module.exports = {
chainWebpack: (config) => {
config.module
.rule('images')
.use('url-loader')
.tap(options => Object.assign({}, options, {
name: '[name].[ext]'
}));
},
css: {
extract: {
filename: '[name].css',
chunkFilename: '[name].css',
},
},
configureWebpack: {
output: {
filename: '[name].js',
chunkFilename: '[name].js',
}
}
};