1、打包命令是npm run build，這個(gè)命令實(shí)際上是在package.json中，scripts中build所對(duì)應(yīng)的命令；
10年積累的成都做網(wǎng)站、成都網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)制作后付款的網(wǎng)站建設(shè)流程，更有天壇街道免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
2、創(chuàng)建一個(gè)prod.server.js，這個(gè)文件不是必須的，這個(gè)文件的用處是在打包完畢之后，通過(guò)啟動(dòng)node.js本地服務(wù)來(lái)訪問(wèn)打包完成的靜態(tài)文件，不需要的同學(xué)可以忽略這一點(diǎn)，
prod.server.js文件代碼示例：
重慶分公司
重慶分公司
let express = require('express');
let config = require('./config/index');
// let axios = require('axios');
let app = express();
let apiRoutes = express.Router();
app.use('/api', apiRoutes);
app.use(express.static('./dist'));
let port = process.env.PORT || config.build.port;
module.exports = app.listen(port, (err) => {
if (err){
console.error(err);
return;
}
console.log('Listening at: http://localhost:'+port+'\n');
});3、在index.html中使用scrip標(biāo)簽引入的js和使用link引入的css文件，全部改為在main.js中直接import；我目前main.js的代碼示例：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview'
import 'iview/dist/styles/iview.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import MuseUI from 'muse-ui'
import 'muse-ui/dist/muse-ui.css'
import 'src/base/css/libs/museui/muse-ui-fonts.css'
import 'src/base/css/libs/museui/muse-ui-icons.css'
import VueResource from 'vue-resource'
import 'src/base/js/libs/waves/waves.min.js'
import 'src/base/css/libs/waves/waves.min.css'
import $ from 'jquery'
Vue.use(VueResource);
Vue.use(iView);
Vue.use(VueAwesomeSwiper);
Vue.use(MuseUI);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '4、圖片的相對(duì)路徑問(wèn)題，要引用相對(duì)路徑下的圖片，首先是在在config/index.js中，將build.assetsPublicPath改為''，原來(lái)是'/'，
在.vue文件中引用圖片，如果是靜態(tài)引用，直接寫相對(duì)路徑，如果是動(dòng)態(tài)引用，需要這樣寫
靜態(tài)引用，直接寫相對(duì)路徑：
動(dòng)態(tài)引用，需要require獲取動(dòng)態(tài)路徑：
computed:{
logo(){
return require(`../../base/img/logo/logo${this.currentImg}.png`);
}
}同樣的動(dòng)態(tài)設(shè)置背景圖片也需要?jiǎng)討B(tài)獲取文件路徑；
data() {
return {
backgroundStyle: {
backgroundImage: `url("${require('./base/img/system/bg.jpg')}")`,
backgroundRepeat: "no-repeat",
backgroundSize: "100%",
}
}
}
5、使用iview開(kāi)發(fā)的話，打包之后，直接打開(kāi)index.html之后會(huì)報(bào)錯(cuò)，有兩個(gè)字體文件引入失敗，但是我這里是沒(méi)有手動(dòng)引入這兩個(gè)文件的，最后百度到解決辦法是，在webpack.prod.conf.js中設(shè)置module.rules中的extract為false;詳情見(jiàn)這個(gè)issue：https://github.com/iview/iview/issues/515
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
