For me , For the first time, Xiao Bai, who is in touch with the front and back integration problem , At first, I was confused , It's a whole problem. One night and one morning , Now write a summary ;

The front-end development :vue-cli+webpack;

The background and development :nodejs frame express;

After front end development , Use localhost Be able to access vue-cli Own server .

And back office , At first I was directly in expres Of views and public Develop front-end pages on , So in some configuration aspects, it's the last project , Now integrate new projects , Let me be a little square .

The process :

1、 Go to the front end Directory ,npm run build Command directly packages the front-end project into dist file ;

2、 I'm going directly to dist Copy the file to the root of the server ;

3、 change routes Under folder index file , Route access to '/' Change to rendering dist Under the document index.html;

result : Access server , Static resources 404;

The second improvement process :( After a lot of information )

1、 find vue-cli Under the project of config Under folder index.js file , find build Part of the assetsPublicPath;( Next, I'll talk about assetsPublicPath The role of )

2、 take assetsPublicPath Change to 'http://localhost:5777/dist';

3、 Integrate to express Server

result :

src="http://localhost:5777/dist/static/js/manifest.0d43cb9e3c7036b97742.js" 

At this time, I am confused , Isn't that the right path ?

But still 404, This is awkward .

Let's get in there assetsPublicPath Knowledge point :

Take a look at the official documents , I'm confused with my poor English , Let me give you a general idea ,assetsPublicPath You can specify the public address of the output file in the browser reference .

First ,webpack I wrote it for you when I packed it dist References to static resources in files , That is to say './static/js|css/***', That's client access dist Static resources can be loaded .

But when dist Deploy to express Last time , When accessing the server , Of static resources url by :assetsPublicPath  +  './static/js | css/ ***';

That's what the above code says .

But why still 404 Well ? It's about express The problem. .

stay app.js The configuration of , There is such a line of code :

app.use(express.static(path.join(__dirname, '/dist'))); ( The default is /public)

The meaning of this sentence is set express Access the directory of static resources , That is to say express You need to access static files from public entrance .

So the address in the second case actually accesses   src="http://localhost:5777/dist/dist/static/js/manifest.0d43cb9e3c7036b97742.js"

That is to say assetsPublicPath Medium localhost:5777 and express.static Medium dist repeated .

In conclusion : Only need to assetsPublicPath Change it to 'localhost:5777' + express.static Of '/dist' + Front end default path '/static/js |css /***';


express Integrate webpack The package file for dist More articles about

  1. Use node-static function vue Package files dist

    vue Packed files dist, If you want to see the effect before going online , The method is as follows : npm install -g node-static Enter into dist Folder , function static command Open the address above

  2. Successfully solved react+webpack The packing file is too large

    I've been learning and using webpack+react+antd Wrote a little project , You could say demo, After all the development is completed, it is found that webpack There are nearly 13.3MB, I'm scared to death , After several days of study , And debugging finally ...

  3. webpack Package files

    npm init -y// Generate package.json npm install webpack webpack-cli --save-dev// install webpack and webpack-cli According to the entry file . ...

  4. Standard development catalog And webpack Multi environment packaging file configuration

    Standard development catalog Common projects Development Directory : ├── project-name ├── README.md ├── .gitignore ├── assets ├── ├── js ├── ├── css ├─ ...

  5. webpack Pack one alone less file

    Need to put btn.less For documents webpack After packing , Put it in the project . On the Internet, baidu published all kinds of , A lot of problems , Now I'll sort out the whole process as follows : 1. Create an empty folder , Name it init_webpack, Run in this folder : this ...

  6. webpack To configure :less/sass File packaging and separation 、 Automatic processing css Prefix 、 Eliminate unused css And complete webpack.config.js file

    One .less File packaging and separation 1. To use less, use first npm install less service : It also needs to be installed Less-loader It's used for packaging . npm install less --save-dev npm inst ...

  7. 3. Use webpack The configuration file webpack.confg.js Configure the entry and exit of the packaged file

    Create in the project root directory webpack.config.js file webpack.config.js The file configuration is as follows : // Node The path operation of is path modular const path=require('pat ...

  8. webpac4k function webpack .\src\main.js .\dist\bundle.js Packaging error

    Packaged command format :webpack The path to the file to be packaged   The path to the packaged output file function webpack .\src\main.js .\dist\bundle.js Prompt error , The error message is as follows : WARNING ...

  9. webpack Extract image file, package and compress

    Extract the image file and package it to the specified path Compress extracted image resources Configuration generation html Image path in One . Preparing the test environment // Working area src// Folder index.js// Entrance file index.css// The style file inde ...

Random recommendation

  1. apache EnableMMAP Instructions

    Official address :http://httpd.apache.org/docs/2.4/mod/core.html#enablemmap Use memory-mapping to read files du ...

  2. jquery How to customize plug-ins ( Extension instance / Static methods )

    1.jquery Types of plug-ins : 1). Plug ins that encapsulate object methods ( Equivalent to instance method ) ( Use $.fn.extend({" Method name ":function( Parameters ){// Method body } }) ) 2). encapsulation ...

  3. Tomcat The root directory work What folders do

    Today we have such a problem : I deployed the project to tomcat Next , There is no problem running , Later, I deployed the original project file of my previous project , The runtime always has the previous interface , And the server starts normally ; After careful examination , Hair ...

  4. Android The event mechanism is completely resolved

    android Events are delivered level by level , Assume that the parent control does not intercept . Pass it to the child control , Suppose the parent control wants to consume events, that is, intercept events , This method needs to be rewritten public boolean onInterceptTouchEvent ...

  5. Hdu 1016 Prime Ring Problem ( Prime rings are classical dfs)

    Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  6. JFreeChart And AJAX+JSON+ECharts Two processing methods generate hot word statistics visualization chart

    The idea of this article : Yes HDFS The acquired data is processed by two different visualization charts . The first one is JFreeChar Visual processing generates image files to view . The second kind AJAX+JSON+ECharts Realize the visualization chart , On the browser .   Yes ...

  7. ssh、scp Remote command execution without secret key :expect

    First installation expect # yum -y install expect Command format # ./expect IP COMM    #expect It's a stand-alone tool , So it can't be used sh To execute 1 2 3 4 5 6 7 ...

  8. VRS—— Memo

    1. All versions VRS, Comment out m_ChisauarePRN Parameters 2. Comment out all of MODULE_GNSSMonitor_ID, Temporarily unavailable . But it will cause basestation Collapse . n.RegisterStat ...

  9. redis( One )-- know redis

    Redis Official website redis Is defined as :“Redis is an open source, BSD licensed, advanced key-value cache and store”, It can be seen that ,R ...

  10. redis File events for

    redis File events for : I.e io Related events . /* File event structure */ typedef struct aeFileEvent { int mask; /* one of AE ...