How to change Vue js application context name?
I added a public path in Vue config js file, but it is not hitting URL with public pathname.
I could see compilation happened with the public path name:
INFO Starting development server... 98% after emitting CopyPlugin
DONE Compiled successfully in 4793ms
5:38:57 PM
App running at:
- Local: http://localhost:8080/testapp/
- Network: http://192.168.104.88:8080/testapp/
Note that the development build is not optimized. To create a
production build, run yarn build.
In vue.config.js
module.exports =
{
publicPath: '/testapp/',
devServer: {
disableHostCheck: true
}
}
Related
Imports of png images fail to resolve locally (in development mode, running npm vite). They do resolve in the production build however. At first I imported them dynamically but they wouldn't resolve in the production build so I imported them beforehand.
//.ts file
import test from "../assets/sprites/test.png"
//vite.config.ts
export default defineConfig({
plugins: [vue()],
build: {
target: 'esnext'
}
})
test.png:1 GET http://localhost:3000/frontend/src/assets/frontend/src/assets/sprites/test.png 404 (Not Found)
To fix this issue, use new URL(url, import.meta.url) to resolve static assets both in prod and dev
See Vite documentation on Static Asset Handling : https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url
const test = new URL('../assets/sprites/test.png', import.meta.url).href
Hi i have a app called Home which has installable plugins which i can install at any point of time which runs in iframe
<Home /home/user/mainprojects/index.html> <-- Home app
<Bed iframe /home/user/plugins/bed/index.html> <-- plugins app
<Bed /iframe>
</Home>
with this nginx setup i'm able to load the plugin app(Bed) with after build(which is heavy time consuming)
here is nginx setup for that
location / {
alias /home/user/mainprojects/dist/;
index index.html;
}
location /Bed {
alias /home/user/plugins/bed/dist/;
index index.html index.htm;
}
Question: i don't want to build main app Home app i want to run it through serve, but second app i,e plugin i will always build which will be available as bundle. with above nginx setup after building both(i,e npm run build, bundle) it will work fine. i want to avoid main app build.
here is how my vue.config.js will look like
module.exports = {
devServer:{
proxy:{
'^/appReplacer':{
target: 'http://100.148.1.9:9003/',
changeOrigin:true,
logLevel:'debug',
pathRewrite: {'^/appReplacer':'/'}
}
}
}
}
Still looking for a solution..
Please help me thanks in advance !!
Assuming you are using Vue CLI v4 which is based on Webpack 4
Webpack DevServer is based on Express framework and allows to setup custom Express middleware using devServer.before option
This way you can configure any path to serve virtually anything you want. For example use the static middleware to serve some static files (dist of your plugin in this case)
Note that following code depends heavily on version of Vue CLI in use. Current release version of Vue CLI 4.5.15 is using "webpack-dev-server": "^3.11.0" which uses "express": "^4.17.1"
// vue.config.js
// express should be installed as it is used by webpack-dev-server
const express = require('express');
module.exports = {
//...
devServer: {
before: function(app, server, compiler) {
app.use('/url/to/plugin', express.static('dist/location/of/your/plugin'));
}
}
};
I am new to Vue js, I am building a website using Vue js where I have a home page and docs folder which contains a lot of documents written and save in a .md file.
Now How I can on the navbar click redirect from my route.js page to docs .md files. Below is my folder structure.
I want to serve my homepage from main.js which is created using vue.js, and docs folder containing markdown files. Inside the docs folder have .vuepress with config.js which was configured to load index.md as the home page.
- docs
- guide
- index.md
- src
- components
- route.js
- vue.config.js
- main.js
Package.json
{
"scripts": {
"docs:build": "vuepress build docs",
"docs:dev": "vuepress dev docs",
"dev": "vuepress dev docs",
"build": "vuepress build docs",
"start": "vue-cli-service serve"
},
}
UPDATE: There are a few issues in your new code:
The app site uses Vue 2, which requires VuePress 1.x, but you have VuePress 2.x installed. If you want the docs and app source in the same project root with different NPM dependencies, you'd need something like a monorepo. To otherwise share NPM dependencies, you'll have to upgrade your app project to Vue 3 or downgrade VuePress. For the sake of example, install VuePress 1.x instead:
npm i -D vuepress#1
The VuePress port is not configured, so it starts at 8080 (until a free port is found). The docs link in your app is hard-coded to port 3000, so your VuePress should be configured to start there:
// docs/.vuepress/config.js
module.exports = {
port: 3000
}
The VuePress base URL is not configured, while your app assumes a base of /docs. Update your VuePress config to set the base URL acccordingly:
// docs/.vuepress/config.js
module.exports = {
base: '/docs/'
}
See GitHub PR
Answer to original question:
VuePress setup
Install vuepress in your project:
$ npm i -D vuepress # if using #vue/cli#4
$ npm i -D vuepress#next # if using #vue/cli#5
Add NPM scripts for Vuepress:
// package.json
{
"scripts": {
"docs:build": "vuepress build docs",
"docs:dev": "vuepress dev docs"
}
}
Create docs/.vuepress/config.js, and export a config object:
a. dest - Output the docs to your app's build output directory (dist for Vue CLI scaffolded projects).
b. base - Set the base URL so that it matches the intended destination on the server (e.g., set base URL to docs if deploying docs to https://example.com/docs/).
c. port - Set the port of the VuePress dev server (we'll configure Vue CLI's dev server to point there later).
d. themeConfig.nav - Set the top navbar links.
// docs/.vuepress/config.js
module.exports = {
dest: 'dist/docs',
title: 'My Project Docs',
base: '/docs/',
port: 3000,
themeConfig: {
nav: [
{
text: 'Guide',
link: '/guide/',
},
{
text: 'Main Project',
link: 'http://localhost:8080'
}
],
}
}
Add a docs link to your app's navbar (e.g., in App.vue):
<nav>
Docs 👈
<router-link to="/">Home</router-link>
...
</nav>
Create docs/README.md with the following contents:
# Hello World
Building
Build your app before the docs (especially if the app's build command deletes the output directory beforehand, as it does with Vue CLI):
$ npm run build
$ npm run docs:build
Development
If using Vue CLI, configure the dev server to redirect /docs to the VuePress dev server:
Configure Vue CLI's devServer.before:
// vue.config.js
module.exports = {
devServer: {
before: app => {
// point `/docs` to VuePress dev server, configured above
app.get('/docs', (req, res) => {
res.redirect('http://localhost:3000/docs')
})
}
}
}
Start the app's server and the docs server:
$ npm run serve
$ npm run docs:dev
You could add the the docs folder into the public directory, then link to /docs/guide/...
I have created a PWA using vue js 2.0 and framework7 and also use Webpack for bundling. I want to use browser-sync to share my project.
I used this config in my webpack.confg file :
new BrowserSyncPlugin({
// browse to http://localhost:3000/ during development,
// ./public directory is being served
host: 'localhost,
port: 3000,
server: { baseDir: ['src'] }
}),
In src/ I have my basic files like index.html, app.vue, app.js.
After using npm run dev command I see this result :
[Browsersync] Access URLs:
----------------------------------
Local: http://localhost:3000
External: http://192.168.1.118::3000
----------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
----------------------------------
[Browsersync] Serving files from: src
After this, localhost:3000 open in my browser and say browsersync: connected but it have showed me a blank page.
Also after I enter website path (http://localhost:3000/en/#!/login) in browser, it showed me Cannot Get /en Error. What is the problem?
Any help will greatly appreciated.
Based on your comment, looks like you are also using webpack-dev-server. In that case you can proxy to it:
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
module.exports = {
// ...
devServer: {
port: 3100
}
// ...
plugins: [
new BrowserSyncPlugin(
// BrowserSync options
{
// browse to http://localhost:3000/ during development
host: 'localhost',
port: 3000,
// proxy the Webpack Dev Server endpoint
// (which should be serving on http://localhost:3100/)
// through BrowserSync
proxy: 'http://localhost:3100/'
},
// plugin options
{
// prevent BrowserSync from reloading the page
// and let Webpack Dev Server take care of this
reload: false
}
)
]
}
I am working on a Vue.js project and all files are generated by webpack on dev and production mode.
but here is my problem :
I can see my vue components in devtools when I inspect on a element.
How could I disable that ?
By the way source map is disabled and I have no .map files in dist folder.
thank you :)
Just checkout the Vue cli docs:
productionSourceMap Type: boolean
Default: true
Setting this to false can speed up production builds if you don't need
source maps for production.
So in your webpack config you write:
module.exports = {
productionSourceMap: false
};
If your vue.config.js which is responsible for your webpack configuration doesn't exist, you may create it.
If webpack has been configured from scratch, it can be removed by deleting or commenting in any case in the webpack production file
the devtool option
tools/webpack.prod.js
module.exports = merge(common, {
// devtool: "source-map",
mode: "production",
...
});